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

问题描述

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

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}

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

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

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

But, since the autoFocus of 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:

 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.

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

推荐答案

这就是我所做的:

如果应用有授权/登录/注册屏幕"，则:

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

1. 在 componentWillMount 中添加 KeyboardListeners，如此处:

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

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

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

在用作KeyboardListener的_keyboardDidShow函数中，执行以下操作:

In _keyboardDidShow function, 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 是 React-Native 的 API，不要忘记像导入任何 React-Native 组件一样导入它.

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

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

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

这篇关于如何在 React-Native 中获得键盘的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！