我是React的新手，在制作演示应用程序时遇到了完全相同的问题。如果你使用onStartShouldSetResponder道具(此处描述)，你可以在一个普通的旧React. view上抓取触摸。很想听听更多经验丰富的反应者对这一策略的看法/如果有更好的策略，但这对我来说是有效的:

containerTouched(event) {
  this.refs.textInput.blur();
  return false;
}

render() {
  <View onStartShouldSetResponder={this.containerTouched.bind(this)}>
    <TextInput ref='textInput' />
  </View>
}

这里需要注意两点。首先，正如这里讨论的，还没有结束所有子视图编辑的方法，所以我们必须直接引用TextInput来模糊它。其次，onStartShouldSetResponder被它上面的其他可触摸控件截获。因此，在容器视图中点击TouchableHighlight等(包括另一个TextInput)将不会触发事件。但是，在容器视图中单击Image仍然会关闭键盘。

我刚刚使用最新的React Native版本(0.4.2)进行了测试，当你点击其他地方时，键盘就会消失。

供你参考:你可以设置一个回调函数，当你解散键盘时，通过将它分配给“onenditing”道具来执行。

你可以像下面这样从react-native导入键盘:

import { Keyboard } from 'react-native';

在你的代码中可以是这样的:

render() {
    return (
      <TextInput
        onSubmit={Keyboard.dismiss}
      />
    );
  }

静态解散() 解散活动键盘并移除焦点。

如果你有keyboardType='numeric'，键盘不解散的问题会变得更严重，因为没有办法解散它。

用ScrollView替换View不是一个正确的解决方案，因为如果你有多个textinput或按钮，在键盘打开时点击它们只会让键盘消失。

正确的方法是用TouchableWithoutFeedback封装视图并调用Keyboard.dismiss()

编辑:你现在可以使用带有keyboardShouldPersistTaps='handled'的ScrollView来只在点击没有被孩子处理的时候解散键盘。点击其他文本，输入或按钮)

如果你有

<View style={{flex: 1}}>
    <TextInput keyboardType='numeric'/>
</View>

改为

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

or

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

编辑:你也可以创建一个高阶组件来取消键盘。

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)

就像这样简单地使用它

...
render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}

注意:需要accessible={false}使输入表单可以通过VoiceOver继续访问。视障人士会感谢你的!

简单的答案是使用ScrollView而不是View，并将scrollable属性设置为false(尽管可能需要调整一些样式)。

这样，当我敲击其他地方时，键盘就会消失。这可能是react-native的一个问题，但点击事件似乎只被ScrollViews处理，这导致了上述行为。

编辑:感谢jllodra。请注意，如果你直接点击到另一个文本输入，然后在外面，键盘仍然不会隐藏。

用以下内容包装整个组件:

import { TouchableWithoutFeedback, Keyboard } from 'react-native'

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
...
</TouchableWithoutFeedback>

为我工作