KeyboardAvoidingView填充错误

Question

react-native 的 KeyboardAvoidingView 使用到小填充。这导致我的键盘在输入字段上移动：

我目前的解决方案
我尝试使用 keyboardVerticalOffset 解决此问题。
这是图像视图的渲染功能，使用KeyboardAvoidView：

render() {
    return (
      <KeyboardAvoidingView
        behavior="padding"
        key={this.state.keyboardRandomKey}
        keyboardVerticalOffset={50}
      >
        @@ all the other stuff of the design is here @@
      </KeyboardAvoidingView>
    );
  }
}

问题
此图显示了在实现之前显示的代码后我遇到的问题。红色箭头表示意外行为 正如您所看到的，正在添加额外的空间，但这是一个灰色区域。这必须是透明的。不知何故，我不能让这个工作。我之前在不同的项目中使用了带有减值的keyboardVerticalOffset并且运行正常。

任何想法都很受欢迎

Answer 1

我添加了一个隐藏＆amp;向键盘显示监听器

 componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this.keyboardDidShowListener,
    );
  }

我创建了一个状态值keyboardOpen，如果键盘处于打开状态，则设置为true。

keyboardDidShowListener = e => {
    this.setState({
      keyboardOpen: true,
      keyboardHeight: e.endCoordinates.height,
    });
  };

如果键盘隐藏

，我将该值设置为false

keyboardHideListener = () => {
    this.setState({
      keyboardAvoidingViewKey: new Date().getTime(),
      keyboardOpen: false,
    });
  };

在回复中我检查键盘是否打开并使用marginBottom重新渲染一些元素：0

if (this.state.keyboardOpen) {
      return (
        <View style={{ marginBottom: 0 }}>
          <RoundTab title="Sign In" onPress={() => this.signIn()} />
        </View>
      );

<强>结果

此外，在TextInput 之后添加具有特定高度的视图是添加一些填充并解决问题的简单修复