Question

我是反应原生的新手。我有一个文本字段（输入）。当用户点击除输入字段之外的其他地方时，我想要关闭键盘。我在这里尝试了几个像TouchableWithoudFeedback这样的解决方案，但它们没有用。此外，我不清楚的一点，我可以使用onFocus中的任何函数，另一方面，onBlur或onEndEditing中没有任何功能这是我的输入组件代码。

<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

此处的解决方案是使用<ScrollView keyboardShouldPersistTaps="handled" />打包表单。 keyboardShouldPersistTaps是重要的部分。对于keyboardShouldPersistTaps来说，它也可能是“永远”，但键盘可能会轻易解雇。此解决方案已在https://stackoverflow.com/a/41429871/1828637

Answer 2

这是上述问题的解决方案： 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 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）上渲染覆盖，并在点击时调用相同的dismisskeyboard（）方法。

像

这样的东西

  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方法中关闭键盘。

当在文本域外的其他地方聚焦/单击时，React-native dismiss键盘

3 个答案: