Impossible de voir le dernier élément d'une liste

Question

J'utilise FlatList pour afficher la liste des personnes, cependant, j'ai remarqué que le dernier élément est toujours un peu de:

Voir point Amy Butts, je dois traîner à top pour le voir. Cet écran est dans un stackNavigator qui a un en-tête. Serait-ce le problème? comment le résoudre?

J'ai essayé marginBottom: 40 sur la FlatList mais cela n'a rien changé.

code:

let renderRow = ({item}) => { 
    return (
     <View style={{flexDirection: "row", justifyContent: "space-between"}}> 

      <TouchableOpacity style={{ flexDirection: "row", justifyContent: "flex-start", marginLeft: 10}} onPress={this.myFunction.bind(this, item)} > 
       <View style={{}}> 
        <Image style={styles.Image} source={{uri: item.Image}} /> 
       </View> 

       <View style={{ marginTop: 15, marginLeft: 10}}> 
        <Text >{item.name}</Text> 
       </View> 

      </TouchableOpacity> 
     </View> 
    ); 
} 

return(
    <FlatList style={{marginTop: 10, backgroundColor: "white"}} 
     keyExtractor={(item, index) => item.id} 
     data={this.state.result}       
     renderItem={renderRow.bind(this)} 
     ItemSeparatorComponent={renderSeparator.bind(this)} 
    /> 
) 

Avec paddingBottom (ou en haut), maintenant les deux derniers ne seront pas affichés:

Answer 1

Vous devez ajouter paddingBottom ou marginBottom au FlatList avec une valeur appropriée à votre conception.

// Some padding amount that is suitable for your design 
<FlatList style={{marginTop: 10, backgroundColor: "white", paddingBottom: 40}} 
    keyExtractor={(item, index) => item.id} 
    data={this.state.result}       
    renderItem={renderRow.bind(this)} 
    ItemSeparatorComponent={renderSeparator.bind(this)} 
/>