反应本机键盘避免在时间之前查看填充

Question

我用 React-native 构建迷你聊天视图。
我的屏幕是由 3 个组件构建的

页眉
列表视图
输入(输入需要固定(

我正在使用带填充
的键盘回避视图处理键盘但我得到丑陋的结果
在我的列表顶部查看就像我在键盘到达之前添加填充一样

您可以在 GIF 中看到问题

我的代码：

主屏幕：

class Registration extends Component{
    render(){
      return(
        <KeyboardAvoidingView style={Style.continerStyle} behavior="padding">
          <StatusBar
            hidden={true}
          />
          <Header/>
          <RegChat/>
          <RegInput/>
        </KeyboardAvoidingView>

      );
  }
}
const Style = {
  continerStyle:{
    flex:1,
    backgroundColor:'#543CDE',
  },
}
export default Registration;

我的列表视图：

class RegChat extends Component{
  constructor(){
    super()
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2','You should receive a 6-digit code in a moment for verification', 'row 2',,'You should receive a 6-digit code in a moment for verification', 'row 2']),
      inputType:'phone',
    };
  }
  render(){
  return(
    <ListView
      renderScrollComponent={props => <InvertibleScrollView {...props} inverted />}
      style={{backgroundColor:'black'}}
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <RegBubble>{rowData}</RegBubble>}
    />)
  }
}
export  {RegChat};

Answer 1

也许你可以试试这个包 反应原生键盘间隔器