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

Question

如何检测用户是否以原生方式关闭键盘,我想在用户关闭键盘时调用一个函数.

如果你能回答检测键盘也是开放的,将不胜感激,谢谢.

我是最新的反应 version 0.56

Answer 1

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

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();
    };
  }, []);

Answer 2

1.您可以使用Facebook的Keyboard类.

这是一个示例代码.

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

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

Answer 3

我把它包裹在一个钩子里：

import { useState, useEffect } from 'react';
import { Keyboard } from 'react-native';

export const useKeyboardVisible = () => {
    const [isKeyboardVisible, setKeyboardVisible] = useState(false);

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

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

    return isKeyboardVisible;
};

该钩子返回一个布尔标志，可用于有条件地应用逻辑或运行所需的任何其他效果。

Answer 4

2023 更新

\n

如果您使用的是 React Native 0.71 或更高版本，您可以使用Keyboard.isVisible()

\n

例子

\n

\nimport {Keyboard, Text, TextInput, StyleSheet, View} from 'react-native';\n\nconst Example = () => {\n  return (\n    <View style={style.container}>\n      <TextInput\n        style={style.input}\n        placeholder="Click here\xe2\x80\xa6"\n        onSubmitEditing={Keyboard.dismiss}\n      />\n      \n      {Keyboard.isVisible() && <Text>Keyboard is visible</Text>}\n    </View>\n  );\n};\n\nconst style = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 36,\n  },\n  input: {\n    padding: 10,\n    borderWidth: 0.5,\n    borderRadius: 4,\n  },\n});\n\nexport default Example;\n\n

\n

Answer 5

我遇到了@react-native-community/hooks中找到的usekeyboard钩子

例如

import { useKeyboard } from '@react-native-community/hooks'

const keyboard = useKeyboard()

console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)

来源：https ://github.com/react-native-community/hooks/blob/master/src/useKeyboard.ts

Answer 6

@Khemraj 的答案的改进版本（对我来说非常有用）具有绑定到实例的方法，以便能够从侦听器更新组件的状态并重新渲染。

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {

  state = {
      keyboardState: 'closed'
  }

  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow = () => {
    this.setState({
        keyboardState: 'opened'
    });
  }

  _keyboardDidHide = () => {
    this.setState({
        keyboardState: 'closed'
    });
  }

  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}