如何在 React-Native 中获得键盘的高度？

Question

我在我的应用程序中使用 React-Navigation，该应用程序由具有多个屏幕的 StackNavigator 组成，其中一些屏幕具有带有 autoFocus={true} 的 TextInput

问题：在这些屏幕上，当组件渲染时，屏幕的高度是在构造函数中设置的：

constructor(props) {
    super(props);
    this.state = { 
        height: Dimensions.get('window').height,
    };
}

但是，由于 TextInput 的 autoFocus 是 true，因此该屏幕上的键盘几乎在渲染后立即弹出屏幕上，导致组件重新渲染由于在 componentWillMount 中添加到 Keyboard 的 eventListener：

 componentWillMount() {
    this.keyboardWillShowListener = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow.bind(this)
    );
}

keyboardWillShow(e) {
    this.setState({
        height:
            Dimensions.get("window").height * 0.9 - e.endCoordinates.height
    });
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}

这会影响性能，我想避免不必要的重新渲染。

问题：
1. React-Navigation 的 ScreenProps 中是否可以设置键盘的动态高度（取决于设备）？
2. 是否可以对 React-Navigation 的 state.params 做同样的事情？
3. 除了使用KeyboardAvoidingView 或this module 之外，还有其他方法可以解决这个问题吗？

Answer 1

这就是我所做的：

如果应用有“授权/登录/注册屏幕”，那么：

1. 在 componentWillMount 中添加 KeyboardListeners 解释here:

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

2. 将autoFocus添加到页面上的电子邮件/电话号码/任何其他“第一个”TextInput，这样当屏幕加载时，键盘就会弹出。

3. 在用作键盘监听器的_keyboardDidShow 函数中，执行以下操作：

   _keyboardDidShow(e) {
       this.props.navigation.setParams({
           keyboardHeight: e.endCoordinates.height,
           normalHeight: Dimensions.get('window').height, 
           shortHeight: Dimensions.get('window').height - e.endCoordinates.height, 
       }); 
   }
   

   Dimensions 是 React-Native 的一个 API，不要忘记像导入任何 React-Native 组件一样导入它。

4. 之后，在重定向到下一页时，传递这些参数，不要忘记继续将它们传递到其他屏幕，以免丢失这些数据：

   this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params });
   

Answer 2

我还需要一个钩子，这就是我获得键盘高度的方法（很大程度上受到其他答案的启发），代码示例在 TypeScript 中：

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

export const useKeyboard = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  function onKeyboardDidShow(e: KeyboardEvent) { // Remove type here if not using TypeScript
    setKeyboardHeight(e.endCoordinates.height);
  }

  function onKeyboardDidHide() {
    setKeyboardHeight(0);
  }

  useEffect(() => {
    const showSubscription = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
    const hideSubscription = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  return keyboardHeight;
};

然后在你的组件中：

  const keyboardHeight = useKeyboard();
  console.log(keyboardHeight);

Answer 3

对于那些仍在寻找now you can use hooks 答案的人。

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

//Then keyboard like this 

const keyboard = useKeyboard()

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

Answer 4

只是想补充一下上述答案，使用keyboardWillShow 和keyboardWillHide 而不是keyboardDidShow 和keyboardDidHide 看起来会好得多。它只是运行得更快，因此看起来更流畅。