react-native - 将最后一个元素添加到 FlatList 的末尾
问题描述
我正在尝试实现以下目标,而除最后一个之外的所有图像都是来自数组的正常图像。
目前这是 FlatList 的代码:
<FlatList
data={images}
numColumns={3}
// ListFooterComponent={
// <View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
// <Image source={require('../../../images/add-icon.png')} />
// </View>}
renderItem={ ({item, index}) => index == images.length -1 ?
<View style={{flexDirection: 'row'}}>
<Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} />
<View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
<Image source={require('../../../images/add-icon.png')} />
</View>
</View>
: <Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} /> }
keyExtractor={(item, index) => index.toString()}
/>
长话短说,将数组中的图片呈现在一个 3 列的表格中,并检查列表中的最后一张图片,除了呈现图片之外,它还呈现这个加号。
但是,如果列表中的元素数量是 3 的倍数,这肯定会出现某种错误,因为加号很可能不在屏幕上。如果我使用 ListFooterComponent,它会将它呈现在一个全新的行中。
有谁知道有效的解决方法?
解决方案
由于我认为我不够清楚,因此我将尝试使用此示例代码正确解释我的想法:
<FlatList
data={[...images, { plusImage: true }]}
numColumns={3}
renderItem={({ item }) => {
if (item.plusImage) {
return (
<View
style={[
StyleSheet.actionUploadedPictureFrame,
{ height: PIC_HEIGHT, width: PIC_WIDTH }
]}
>
<Image source={require("../../../images/add-icon.png")} />
</View>
);
}
return (
<Image
style={[
StyleSheet.actionUploadedPictureFrame,
{ height: PIC_HEIGHT, width: PIC_WIDTH }
]}
source={{ uri: item.url }}
/>
);
}}
keyExtractor={(item, index) => index.toString()}
/>;
我不知道直接在data
prop 中像这样连接数据数组是否是最佳做法,但您始终可以选择在 render 方法中更早地声明它。让我知道这是否符合您的要求。
推荐阅读
- django - 使用 Gunicorn 在 Heroku 上部署的 Django Web 应用程序 - 一半的请求随机失败(错误代码 500)
- node.js - 如何使用 node 的实验性 http2-module 选择网络接口?
- php - PHP - 数组格式变量到真实数组
- html - 表格落在 div 容器之外
- java - 将此活动转换为片段
- php - 浏览器不显示任何内容 - 使用 PHP 进行 SQL 查询
- reactjs - 符号不是函数反应酶 i18n 错误
- android - 打开 Android Studio 3.0.1 时出错
- c++ - insert_or_assign 允许迭代器
- android - 检测并发事件编辑