键盘避免视图填充错误

Question

有以小填充正在使用的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

我在键盘上添加了一个隐藏和显示监听器

 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 之后添加具有一定高度的视图是添加一些填充并解决问题的简单解决方案