Javascript Can'；t查看列表的最后一项

我使用FlatList查看人员列表，但是，我注意到最后一项总是有点偏离：

请参见项目

Amy Butts

，我必须拖动到顶部才能看到它。此屏幕位于具有标题的stackNavigator内。这就是问题所在吗？如何解决

我试过了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)} 
    />
)

let renderRow=（{item}）=>{
返回(
{item.name}
);
}
返回(
项目id}
数据={this.state.result}
renderItem={renderRow.bind（this）}
ItemSeparatorComponent={renderSeparator.bind（this）}
/>
)

使用paddingBottom（或top），现在将不显示最后两项：

---

您需要将

填充底部

或

边缘底部

添加到

平面列表

，并为您的设计添加合适的值

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

//一些适合您的设计的填充量
项目id}
数据={this.state.result}
renderItem={renderRow.bind（this）}
ItemSeparatorComponent={renderSeparator.bind（this）}
/>

已通过设置

marginBottom:120

（基于我的设计）修复。感谢更好的方法是将

flex:1

作为一种样式添加到平面列表中。这允许列表占据屏幕的全部可用宽度和高度，而不是手动设置单个元素的边距填充。