无法查看列表的最后一项

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（或top），现在最后两个项目将不会显示：

- Khalil Khalaf

Answer 1

您需要向FlatList添加paddingBottom或marginBottom，并根据您的设计选择适当的值。

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

- bennygenel

---

通过设置 marginBottom: 120（基于我的设计），问题已被解决。谢谢。 - Khalil Khalaf

更好的方法是将 flex: 1 样式应用于您的 FlatList。这样可以使列表占据屏幕的完整可用宽高，而不是手动为每个元素设置边距填充。 - Shivansh Singh