无法查看列表的最后一项
Can't view last item of a List
我正在使用 FlatList 查看人员列表,但是,我注意到最后一项总是有点偏差:
查看项目 Amy Butts
,我必须拖到顶部才能看到它。此屏幕位于具有 header 的 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),现在最后两项将不会显示:
您需要将 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)}
/>
我正在使用 FlatList 查看人员列表,但是,我注意到最后一项总是有点偏差:
查看项目 Amy Butts
,我必须拖到顶部才能看到它。此屏幕位于具有 header 的 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),现在最后两项将不会显示:
您需要将 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)}
/>