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

How to get a height of a Keyboard in React-Native?

提问by Eduard

I am using React-Navigation in my app and the app consists of StackNavigator with multiple screens, some screens of which have TextInput with autoFocus={true}

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

Problem:on these screens when the component renders, the height of the screen is being set in the constructor:

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

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

But, since the autoFocusof TextInput is true, the keyboard on this screen pops-up on the screen almost instantly after the render, causing the component to re-render due to the eventListener that is added to Keyboard in componentWillMount:

但是，由于autoFocusTextInput 是true，此屏幕上的键盘在渲染后几乎立即在屏幕上弹出，由于在 componentWillMount 中添加到键盘的 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);
}

This affects the performance and I would like to avoid the unnecessary re-renders.

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

Questions:
1. Is it possible to set the dynamic height (depending on the device) of the Keyboard in React-Navigation's ScreenProps?
2. Is it possible to do the same with React-Navigation's state.params?
3. Is there any other way to solve this problem, apart from applying KeyboardAvoidingView or this module?

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

回答by Eduard

This is what I did:

这就是我所做的：

If the app has "Authorization / Log-in / Sign-up screen" then:

如果应用程序具有“授权/登录/注册屏幕”，则：

1. In componentWillMount add KeyboardListeners as explained here:

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

2. Add autoFocusto e-mail / phone number / any other "first" TextInput on the page, so that when the screen loads, the Keyboard pops-up.

3. In _keyboardDidShowfunction, that is used as a KeyboardListener, do the follows:

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

   Dimensions is an API of React-Native, do not forget to import it just like you import any React-Native component.

4. After that, while redirecting to the next page, pass these params and do not forget to keep on passing them to other screens in order not to lose this data:

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

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

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

2. 将自动对焦添加到电子邮件/电话号码/页面上的任何其他“第一个”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 });
   

回答by Kevin Amiranoff

I also needed a hook for it, so that is how I get the height of the keyboard (largely inspired by the other answer), the code example is in TypeScript:

我还需要一个钩子，所以这就是我获得键盘高度的方式（很大程度上受另一个答案的启发），代码示例在 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];
};

then in your component:

然后在您的组件中：

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

回答by Ethan Naluz

Just would like to add to the above answers, that using keyboardWillShowand keyboardWillHiderather than keyboardDidShowand keyboardDidHidewill look much better. It just runs sooner and hence, looks smoother.

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