如何在React Native中识别键盘是否打开？

Question

我有一个文本输入框和一个提交按钮，我在文本输入框上添加了“onendediting”事件。如果我在文本框中输入值，并在未结束编辑的情况下按下提交按钮，则预期不会触发“onendediting”事件。因此，我想跟踪键盘，如果键盘打开，则不允许提交按钮工作。

我该如何处理？我使用了“keyboard.addEventListener”，但它不起作用。

- SA-Mobile

---

这个回答是否解决了你的问题？如何在React Native中检测键盘何时打开或关闭 - sashoalm

Answer 1

注意事项（适用于安卓）：如果您的清单文件包含android:windowSoftInputMode="adjustPan"，则此钩子在安卓上将无法使用。

我使用了一个钩子来解决这个问题：

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

const useKeyboard = () => {
  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;
};

export default useKeyboard;

使用方法：

import React from 'react';
import {Text} from 'react-native';
import useKeyboard from './useKeyboard';

const App = () => {
  const isKeyboardOpen = useKeyboard();

  return isKeyboardOpen ? <Text>OPEN</Text> : <Text>CLOSE</Text>;
};

- ridvanaltun

---

以上示例在我的情况下无法工作。我的清单文件包含android:windowSoftInputMode="adjustResize"。 - SA-Mobile