如何在本机反应中识别键盘是否打开？

Question

我有文本输入和一个提交按钮，我在“onendediting”的文本输入上添加了事件，如果我在文本框中输入值并按下提交按钮而不结束编辑，那么事件“onendediting”不会按预期触发。所以我想在键盘打开时跟踪键盘我不允许提交按钮工作。 我该如何处理？我使用了“keyboard.addEventListener”，但它不起作用。

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>;
};