iPhone X上的KeyboardAvoidingView重叠屏幕

Question

我目前有一个64 KeyboardAvoidingView的硬编码keyboardVerticalOffset.这在iPhone上运行良好,但在iPhone X上约为20px.

该组件如下所示:

<KeyboardAvoidingView behavior='padding' keyboardVerticalOffset={ 64 }>
  <View style={ styles.messageList }>
    ...
  </View>
  <View style={ styles.messageInput }>
    ...
  </View>
</KeyboardAvoidingView>

有没有keyboardVerticalOffset比硬编码值更好的方法来确定应该是什么？还有什么我可以用组件放置做不同的事情吗？我愿意接受任何建议.

iPhone 8

iPhone X.

Answer 1

这是由iphoneX的状态栏高度不同引起的.(如果您在模拟器中使用⌘Y切换"通话中"状态栏,您也会遇到与其他iphone相同的问题).

您可以获取状态栏高度并使用它来设置KeyboardAvoidingView的keyboardVerticalOffset值.(在我们的例子中,这是44 + statusBarHeight)

import React, {Component} from 'react';
import {KeyboardAvoidingView, NativeModules, StatusBarIOS} from 'react-native';

const {StatusBarManager} = NativeModules;

export class IOSKeyboardAvoidingView extends Component {

  state = {statusBarHeight: 0};

  componentDidMount() {
    StatusBarManager.getHeight((statusBarFrameData) => {
      this.setState({statusBarHeight: statusBarFrameData.height});
    });
    this.statusBarListener = StatusBarIOS.addListener('statusBarFrameWillChange', (statusBarData) => {
      this.setState({statusBarHeight: statusBarData.frame.height});
    });
  }

  componentWillUnmount() {
    this.statusBarListener.remove();
  }

  render() {
    const {style, children} = this.props;
    return (
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={44 + this.state.statusBarHeight}
        style={style}
      >{children}
      </KeyboardAvoidingView>
    );
  }
}

Answer 2

有关类似问题，请参阅：https : //stackoverflow.com/a/51169574/10031014

Answer 3

因此，我进行了快速检查，考虑到我对如何在本机 iOS 中执行此操作的了解，并且似乎在较新版本的 React Native 中，您可以相对轻松地执行此操作。

似乎确实有几个选项，具体取决于您的灵活性需求。

首先，您是否尝试过使用KeyboardAvoidView而不是标准容器View而不指定keyboardVerticalOffset？

另一个为您提供更多控制权的选项（类似于我在本机 iOS 应用程序中所做的操作）是使用该Keyboard模块在键盘事件上创建侦听器。

  componentWillMount () {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardWillChangeSub = Keyboard.addListener('keyboardWillChangeFrame', this.keyboardWillChange);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillChangeSub.remove();
    this.keyboardWillHideSub.remove();
  }

这将允许您从事件参数获取键盘高度：

keyboardWillShow = (event) => {
    Animated.parallel([
      Animated.timing(this.keyboardHeight, {
        duration: event.duration,
        toValue: event.endCoordinates.height,
      }),
      Animated.timing(this.imageHeight, {
        duration: event.duration,
        toValue: IMAGE_HEIGHT_SMALL,
      }),
    ]).start();
  };

对keyboardWillChange 和keyboardWillHide 重复类似的操作。

有关选项的更好、更详细的说明，请参阅此页面： https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-graceously-when-the-keyboard-pops -up-7442c1535580

keyboardVerticalOffset我认为最好的第一个测试是在尝试添加代码来处理 keboard 事件之前尝试删除。