無法查看列表

Question

我使用FlatList觀看的人名單的最後一個項目，但是，我已經注意到了，最後一個項目總是有點過：

參見條款Amy Butts，我不得不拖到頂部爲了看到它。該屏幕位於具有標題的stackNavigator中。那會是問題嗎？如何解決它？

我在FlatList上嘗試了marginBottom：40，但它沒有改變任何東西。

代碼：

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

隨着paddingBottom來（或頂部），現在最後兩個項目將不會顯示：

Answer 1

您需要添加paddingBottom或marginBottom至FlatList具有適合您設計的價值。

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