无法查看列表

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