Gros espace entre les éléments dans FlatList

Question

Je suis en train de mettre en œuvre une page de commentaire comme Facebook. D'une manière ou d'une autre, je reçois beaucoup d'espace blanc. Regarde ça!

Quand je défiler au fond ... le reste des commentaires sont là .. bizarre

Voici ma fonction et rendre 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}/> 
    ) 
    } 

Je définis la couleur d'arrière-plan de la FlatList et il colore tous les écrans (sauf le clavier et la navigation). Je n'ai pas remarqué cela jusqu'à ce que j'applique ma saisie au clavier. Donc, rien de mal avec le clavier.

Ceci est tellement werid .. !!

Answer 1

Je recevais null pour mon image d'avatar et cela a montré la liste blanche énorme. Je l'ai compris lors de l'impression de tous les commentaires sur la console

Merci les gars!

Answer 2

Pour moi, l'espace ressemble exactement à la taille du clavier, au lieu d'utiliser l'entretoise RkAvoidKeyboard, essayez d'utiliser react-native-keyboard-spacer

Il est facile de mettre en place et vous aurez juste à le mettre sous votre commentaire composant TextInput ou au le fond du récipient, selon ce qui vous convient.

Voici un exemple que je peux fournir et qui peut vous aider à

<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/> 

Bonne chance!