键盘模块用于控制键盘事件。

import {Keyboard} from 'react-native' 在渲染方法中添加以下代码。 呈现(){ 返回<TextInput onSubmitEditing={键盘。驳回}/ >; ｝

你可以使用-

Keyboard.dismiss()

解散活动键盘，并根据react本机文档删除焦点。

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

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

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

将组件包装在TouchableWithoutFeedback中可能会导致一些奇怪的滚动行为和其他问题。我更喜欢用onStartShouldSetResponder属性填充在视图中包装我最顶层的应用程序。这将允许我处理所有未处理的触摸，然后解散键盘。重要的是，由于handler函数返回false，所以触摸事件会像正常情况一样向上传播。

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }

我们可以在没有react-native反馈的情况下使用keyboard和tochable

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}
  >
    {children}
  </TouchableWithoutFeedback>
);

并这样使用它:

const App = () => (
  <DismissKeyboard>
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="username"
        keyboardType="numeric"
      />
      <TextInput
        style={styles.input}
        placeholder="password"
      />
    </View>
  </DismissKeyboard>
);

我还在这里用源代码进行了解释。

在ScrollView中使用keyboardShouldPersistTaps，你可以传入“handled”，它处理人们所说的使用ScrollView带来的问题。这是文档中关于使用'handled'的说明:当点击被子程序处理(或被父程序捕获)时，键盘不会自动解散。这里是引用的地方。

如何在TextInput周围/旁边放置一个可触摸组件?

var INPUTREF = 'MyTextInput';

class TestKb extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}>
                <View>
                    <TextInput ref={'MyTextInput'}
                        style={{
                            height: 40,
                            borderWidth: 1,
                            backgroundColor: 'grey'
                        }} ></TextInput>
                </View>
                <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}>
                    <View 
                        style={{ 
                            flex: 1, 
                            flexDirection: 'column', 
                            backgroundColor: 'green' 
                        }} 
                    />
                </TouchableWithoutFeedback>
            </View>
        )
    }
}