在時間之前反應本機KeyboardAvoidingView填充

Question

我使用react-native構建迷你聊天視圖。
我的屏幕是由3成分

頭
的ListView
輸入（輸入需要被固定）

我使用KeyboardAvoidingView具有填充
到韓德爾鍵盤 但我建立得到醜陋的結果
在我的列表頂部查看 它像我在鍵盤抵達前添加填充

you can see the problem in the 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

也許你可以試試這個包react-native-keyboard-spacer