在 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

您需要更改 TouchableWithoutFeedback

的 onPress 代码

<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'>

在 React Native 中键盘没有被 Keyboard.dismiss 解雇

Keyboard not being dismissed with Keyboard.dismiss in React Native

keyboard

ios

react-native

expo