如何在 React Native 中检测键盘何时打开或关闭

Question

如何检测用户是否在本机反应中关闭键盘，我想在用户关闭键盘时调用一个函数。

如果您能回答检测键盘是否打开，我们将不胜感激，谢谢。

我在 react native 最新的 version 0.56

原文由 RajnishCoder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1.您可以使用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

选择任何你觉得更方便的。

原文由 Khemraj Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

谢谢你们的回答。如果有人感兴趣，这里是钩子版本：

 const [isKeyboardVisible, setKeyboardVisible] = useState(false);

 useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        setKeyboardVisible(true); // or some other action
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardVisible(false); // or some other action
      }
    );

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

原文由 5-10 发布，翻译遵循 CC BY-SA 4.0 许可协议