Question

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

当组件呈现时，这些屏幕上的

问题：，屏幕高度正在构造函数中设置：

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

但是，由于TextInput的autoFocus为true，因此屏幕上的键盘会在渲染后几乎立即弹出，导致组件重新生成-render由于在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

这就是我所做的：

如果该应用具有＆＃34;授权/登录/注册屏幕＆＃34;然后：

在componentWillMount中添加KeyboardListeners，如解释here：

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

将autoFocus添加到电子邮件/电话号码/任何其他＆＃34;首先＆＃34;页面上的TextInput，以便在屏幕加载时弹出键盘。

在_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组件一样。

之后，在重定向到下一页时，传递这些参数并不要忘记继续将它们传递到其他屏幕，以免丢失这些数据：
```
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 = (): [number] => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

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

  function onKeyboardDidHide(): void {
    setKeyboardHeight(0);
  }

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

  return [keyboardHeight];
};

然后在您的组件中

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

Answer 3

仅想补充上面的答案，使用keyboardWillShow和keyboardWillHide而不是keyboardDidShow和keyboardDidHide看起来会更好。它运行得更快，因此看起来更平滑。

Answer 4

对于仍在寻找此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)

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

4 个答案: