javascript - 无法查看列表的最后一项

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)，现在不会显示最后两项:

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