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

Question

我在我的应用程序中使用React-Navigation,该应用程序包含多个屏幕的StackNavigator,其中一些屏幕具有TextInput, autoFocus={true}

问题:在组件渲染时在这些屏幕上,屏幕的高度在构造函数中设置:

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

但是,由于autoFocusTextInput是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或此模块之外,还有其他方法可以解决此问题吗？

Answer 1

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

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

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

  function onKeyboardDidShow(e: KeyboardEvent) {
    setKeyboardHeight(e.endCoordinates.height);
  }

  function onKeyboardDidHide() {
    setKeyboardHeight(0);
  }

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

  return keyboardHeight;
};

然后在您的组件中：

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

Answer 2

这就是我做的:

如果应用程序具有"授权/登录/注册屏幕",则:

1. 在componentWillMount添加KeyboardListeners为解释在这里:

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

2. 将autoFocus添加到页面上的电子邮件/电话号码/任何其他"第一"TextInput,以便在加载屏幕时弹出键盘.

3. 在_keyboardDidShow函数中,用作KeyboardListener,执行以下操作:

   _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 3

只是想添加到上述答案中，使用keyboardWillShowandkeyboardWillHide而不是keyboardDidShowandkeyboardDidHide看起来会好得多。它只是运行得更快，因此看起来更流畅。

Answer 4

对于现在仍在寻找答案的人，您可以使用 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)