如何检测用户是否在 React Native 中关闭键盘,我想在用户关闭键盘时调用一个函数。
如果您也能回答检测键盘是否打开,我们将不胜感激,谢谢。
我正在使用 React Native 最新版 version 0.56
最佳答案
1.您可以使用 Keyboard class 来自 Facebook 。
这是一个示例代码。
import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';
class Example extends Component {
componentWillMount () {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow () {
alert('Keyboard Shown');
}
_keyboardDidHide () {
alert('Keyboard Hidden');
}
render() {
return (
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
);
}
}
###2。您也可以使用其他一些 npm 依赖项,例如 react-native-keyboard-listener .将组件导入到要使用的文件中:
import KeyboardListener from 'react-native-keyboard-listener';
直接在您的代码中使用该组件。组件不会渲染任何东西<View>
<KeyboardListener
onWillShow={() => { this.setState({ keyboardOpen: true }); }}
onWillHide={() => { this.setState({ keyboardOpen: false }); }}
/>
</View>
要安装此依赖项,请运行以下命令。npm install --save react-native-keyboard-listener
选择您觉得更方便的任何一个。
关于react-native - 如何在 React Native 中检测键盘何时打开或关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51606099/