時間の前にネイティブKeyboardAvoidingViewパディングを反応させる

Question

私はreact-nativeでミニチャットビューを作成します。
私の画面は、私はキーボード をヘンデルするパディング
とKeyboardAvoidingViewを使用している3成分

ヘッダ
リストビュー
入力（入力を固定する必要がある）

からビルド私です醜い結果を得る
私のリストのトップに見る キーボードが到着する前にパディングを追加するのが好きです。

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