将最后一个元素添加到 FlatList 的末尾

Question

我正在努力实现以下目标，而除了最后一个之外，所有图像都是来自数组的正常图像。

目前这是 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列的table中渲染数组中的图片，并检查列表中的最后一张图片，除了渲染图片外，它还渲染这个加号.

但是，如果列表中的元素数量是 3 的倍数，这肯定会出现某种错误，因为加号很可能会超出屏幕范围。如果我使用 ListFooterComponent，它会在一个全新的行中呈现它。

有人知道解决这个问题的有效方法吗？

Answer 1

因为我觉得我说的不够清楚，我会尝试用这个示例代码来解释我的想法：

<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 属性中连接数据数组是否是最佳实践，但您始终可以选择在 render 方法中更早地声明它。让我知道这是否符合您的要求。

Answer 2

我也遇到过同样的情况，当我查看 FlatList 的文档时找到了一个好方法，所以我推荐的最好方法是使用 ListFooterComponent 你可以传递一个样式对象对于该元素，使用 ListFooterComponentStyle Click here for more details.

将最后一个元素添加到 FlatList 的末尾

Add one last element to the end of FlatList

react-native

react-native-flatlist