键盘不会被 React Native 中的 Keyboard.dismiss 关闭

Question

当用户点击键盘或输入之外的任何地方时，我希望关闭键盘，但是当我点击其他地方时键盘不会被关闭：

        <TouchableWithoutFeedback style={styles.container} onPress={Keyboard.dismiss}>
            <View style={styles.inputContainer}>
                <TextInput
                    placeholder="Search Term"
                    style={styles.input}
                    onChangeText={setSearch}
                    value={search}
                    returnKeyType="search"
                    onSubmitEditing={handleSubmit}
                />
            </View>
        </ TouchableWithoutFeedback>

样式非常标准：

   container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputContainer: {
        position: 'absolute',
        top: stackHeaderHeight + 10,
        height: height * .1,
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },

Answer 1

你需要改变你的onPress代码TouchableWithoutFeedback

<TouchableWithoutFeedback style={styles.container} onPress={()=> Keyboard.dismiss()}>

        </ TouchableWithoutFeedback>

示例工作代码。

render() {
return (
  <TouchableWithoutFeedback onPress={()=>Keyboard.dismiss()} >
    <View style={{ flex: 1 }}>
      <TextInput returnKeyType="search" style={{borderWidth:1,borderColor:'grey',marginTop:100,height:50,marginHorizontal:50}}/>
    </View>
  </TouchableWithoutFeedback>
);
}

我认为您的样式属性有问题。 请检查您的container和inputcontainer样式属性。 如果您的render方法中有任何ScrollView ，请添加以下内容

<ScrollView keyboardShouldPersistTaps='always'>