react-native - 键盘避免 View 填充错误

Question

有到小填充正在被 使用KeyboardAvoidingView 的 react 原生 .这导致我的 键盘在输入字段上移动 :


我目前的解决方案
我尝试使用 keyboardVerticalOffset 解决这个问题。
这是来自图像的 View 的渲染函数，它使用了 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,
    });
  };

在 react 返回中，我检查键盘是否打开并相应地使用 marginBottom 重新渲染一些元素:0

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

结果

还有 添加 View 有一定高度 在 TextInput 之后是添加一些填充并解决问题的简单方法