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

【问题标题】：Add one last element to the end of FlatList将最后一个元素添加到 FlatList 的末尾
【发布时间】：2019-01-22 21:16:01
【问题描述】：

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

目前这是 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，它会将它呈现在一个全新的行中。

有人知道有效的解决方法吗？

【问题讨论】：

如何将其添加为图像数组的真实元素并在 renderItem 属性内的条件下处理其渲染？

标签： react-native react-native-flatlist

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

【讨论】：

非常感谢！我想做到这一点，但对javascript（3个点和连接）不太了解，我不知道该怎么做！我会检查它的进展情况，并可能将其作为正确答案:)
不客气！这就是所谓的传播运算符，在反应世界（和一般的 js）中非常有用
@Milore 真棒答案！谢谢米洛尔。对我 +1 点赞。
这不是一个优雅的解决方案。 React Native 应该已经提供了数据列表作为 renderItem 函数的参数

【解决方案2】：

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

【讨论】：

正如您在@Yokhen 的问题中看到的那样：如果我使用 ListFooterComponent，它会在一个全新的行中呈现它。这就是我编写该解决方案的原因。
嗯，我认为还有一个样式选项，即ListFooterComponentStyle，因此您不必担心样式。
如果你想在一个网格中渲染来自不同父级的组件，你必须这样做，据我所知这是不可能的。