FlatListのアイテム間の大きなスペース

Question

私はFacebookのようなコメントページを実装しています。どういうわけか私はたくさんの空白を得ています。これをチェック！私は下にスクロールすると

...コメントの残りの部分は...とても奇妙がある

ここ

私のレンダリング機能とFlatList

render() { 
    return (
     <RkAvoidKeyboard style={styles.bigContainer} onResponderRelease={(event) => { 
     Keyboard.dismiss(); 
     }}> 
     <FlatList 
      ref='list' 
      style={styles.root} 
      data={this.props.comments} 
      ItemSeparatorComponent={this._renderSeparator} 
      keyExtractor={this._keyExtractor} 
      renderItem={this._renderItem}/> 
      {this._renderKeyboard()} 
     </RkAvoidKeyboard> 
    ) 
    } 

_keyExtractor(item, index) { 
    return item.id; 
    } 

    _renderSeparator() { 
    return (
     <View style={styles.separator}/> 
    ) 
    } 

です

FlatListの背景色を設定し、すべての画面を色付けします（キーボードとナビゲーションを除く）。私はキーボード入力を実装するまでこれに気付かなかった。キーボードで何も問題ありません。

これは非常に厄介です！スペースではなくRkAvoidKeyboardスペーサーを使用するのでは、正確にキーボードの大きさに見える私に

Answer 1

私のアバターイメージではnullになりましたが、それは巨大な空白リストを示していました。

すべてのコメントをコンソールに印刷している間に、この問題を解消しました。

ありがとう！

Answer 2

、使用してみてください

react-native-keyboard-spacerその簡単に設定すると、あなたは自分のコメントTextInputコンポーネントの下やでそれを設定する必要がありますどちらかがあなたに合った容器の底。

は、ここで私が提供できるサンプルであり、それはあなたに

すべてのベスト

<View> 

<FlatList 
    data = {dataSource} 
    renderItem = {({item}) => this._renderFlatListItem(item)} 
    keyExtractor = {(item) => item.id} 
/> 


<View style={style.textInputContainer}> 

    <TextInput 
     placeholder={"Text goes here"} 
     ref={input => { this.textInput = input }} 
     onChangeText={(text) => this.setState({currentMessage:text})} 
     value={this.state.message} 
     multiline={true} 
     underlineColorAndroid = {'transparent'} 
    /> 

    <TouchableHighlight 
     underlayColor={'transparent'} 
     style={style.sendButtonContainer} 
     onPress = {() => {this._sendMessage();}}> 

     <Image source={require('../../Assets/Images/shape.png')} 
       style={style.sendButton} resizeMode="contain"/> 

    </TouchableHighlight> 


</View> 

<KeyboardSpacer/> 

を助けるかもしれません！