当焦点移出/单击其他文本字段外的其他地方时，React-native 关闭键盘

Question

我是本机反应的新手。我有一个文本字段（输入）。当用户单击输入字段以外的其他地方时，我希望键盘被解除。我尝试了这里建议的几种解决方案，如 TouchableWithoudFeedback，但它们没有奏效。另外，我不清楚的一点是，我可以在 onFocus 中使用任何函数，另一方面，在 onBlur 或 onEndEditing 中没有任何作用这是我的 Input 组件代码。

<InputGroup borderType='rounded' style={styles.inputGrp}>
                                    <Input placeholder={'Password'} secureTextEntry={true} style={styles.input}
                                           onChangeText={(pin1) => this.setState({pin1: pin1})}
                                           value={this.state.pin1}
                                           maxLength={8}
                                    />

Answer 1

这是上述问题的解决方案：Hide keyboard in react native

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

用 TouchableWithoutFeedback 包裹你的根组件并在 onPress 触发 Keyboard.dismiss，如下所示

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{flex: 1}}>
          ........
          //rest of the component
          ........
    </View>
</TouchableWithoutFeedback>

Answer 2

这里的解决方案是将您的表单用<ScrollView keyboardShouldPersistTaps="handled" />. 这keyboardShouldPersistTaps是重要的部分。对于 ，它也可以是“从不” keyboardShouldPersistTaps，但键盘可能会很容易消失。该解决方案已在/sf/answers/2900091001/共享

Answer 3

当用户输入完文本后，您可以使用键盘的完成按钮关闭键盘。

                                <TextInput placeholder={'Password'} secureTextEntry={true} style={styles.input}
                                       onChangeText={(pin1) => this.setState({pin1: pin1})}
                                       value={this.state.pin1}
                                       maxLength={8}
                                       onSubmitEditing={ ()=> this.dismissKeyboardAction()}/>

在某处定义此方法。

dismissKeyboardAction() {
    dismissKeyboard();
  }

不要忘记导入

var dismissKeyboard = require('dismissKeyboard');

此外，如果您想在键盘可见时用户点击键盘以外的任何其他位置时关闭键盘，则可以使用多种解决方法。使用keyboardWillShow 和keyboardWillHide 方法设置和取消设置状态变量，例如isKeyboardVisible = true。此外，基于此状态变量，如果为 true，则使用绝对坐标（从高度 0 到屏幕高度 - 键盘高度）在整个屏幕（透明 TouchableHighlight 或 TouchableWithoutFeedback）上渲染覆盖层，并在点击时调用相同的misskeyboard()方法。

就像是

  componentWillMount() {
  if (Platform.OS === 'ios') {
      Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); //not supported on Android
      Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); //not supported on Android
    }
    else {
      Keyboard.addListener('keyboardDidShow', this.keyboardWillShowAndroid);
      Keyboard.addListener('keyboardDidHide', this.keyboardWillHideAndroid);
   }
}
keyboardWillShow (e) {
    let newSize = e.endCoordinates.height
    this.setState({
      keyboardHeight: newSize,
      isKeyboardVisible: true
    })
  }
keyboardWillHide (e) {
    this.setState({
      keyboardHeight: 0,
      isKeyboardVisible: false
    })
  }

你可以这样得到屏幕高度

import Dimensions from 'Dimensions';
var height = Dimensions.get('window').height;
    var width = Dimensions.get('window').width;

从这里，您可以仅当键盘可见时在 UI 上渲染透明的可触摸组件，并在 onPress 方法中关闭键盘。