在本机中隐藏键盘

本文翻译自：Hide keyboard in react-native

If I tap onto a textinput, I want to be able to tap somewhere else in order to dismiss the keyboard again (not the return key though). 如果我点击一个文本输入，我希望能够点击其他地方以便再次关闭键盘（虽然不是回车键）。 I haven't found the slightest piece of information concerning this in all the tutorials and blog posts that I read. 在我阅读的所有教程和博客文章中，我都没有找到与此有关的丝毫信息。

This basic example is still not working for me with react-native 0.4.2 in the Simulator. 在Simulator中使用本机0.4.2时，此基本示例仍不适用于我。 Couldn't try it on my iPhone yet. 还无法在我的iPhone上尝试。

<View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    <TextInput
      style={{height: 40, borderColor: 'gray', borderWidth: 1}}
      onEndEditing={this.clearFocus}
    />
  </View>

---

#1楼

参考：https://stackoom.com/question/20YX7/在本机中隐藏键盘

---

#2楼

The simple answer is to use a ScrollView instead of View and set the scrollable property to false (might need to adjust some styling though). 简单的答案是使用ScrollView而不是View并将可滚动属性设置为false（尽管可能需要调整某些样式）。

This way, the keyboard gets dismissed the moment I tap somewhere else. 这样，当我轻按其他位置时，键盘就消失了。 This might be an issue with react-native, but tap events only seem to be handled with ScrollViews which leads to the described behaviour. 这可能是react-native的问题，但是tap事件似乎仅由ScrollViews处理，这导致了所描述的行为。

Edit: Thanks to jllodra. 编辑：感谢jllodra。 Please note that if you tap directly into another Textinput and then outside, the keyboard still won't hide. 请注意，如果您直接点击另一个Textinput然后在外面，键盘仍然不会隐藏。

---

#3楼

How about placing a touchable component around/beside the TextInput ? 如何在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>
        )
    }
}

---

#4楼

如果我没记错的话，最新版本的React Native已经解决了这个问题，可以通过点击来关闭键盘。

---

#5楼

I just tested this using the latest React Native version (0.4.2), and the keyboard is dismissed when you tap elsewhere. 我刚刚使用最新的React Native版本（0.4.2）对此进行了测试，当您在其他位置点击时，键盘将关闭。

And FYI: you can set a callback function to be executed when you dismiss the keyboard by assigning it to the "onEndEditing" prop. 仅供参考：您可以通过将键盘分配给“ onEndEditing”道具来设置在关闭键盘时执行的回调函数。

---

#6楼

Use ScrollView instead of View and set the keyboardShouldPersistTaps attribute to false. 使用ScrollView而不是View ，并将keyboardShouldPersistTaps属性设置为false。

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>