javascript - 如何创建一行 3 个图像，直到第 n 个图像，最后一个图像应该有一个 + 图标来上传新图像？

Question

我想要在所有图像的末尾有一个 + 按钮，在情况 1 中，如果没有可用图像，屏幕上应该只有这 1 个按钮，否则在可用图像之后，该按钮将位于所有图像的最后一个，但是我想让这个按钮看起来与这些图像相同，并且也是 3 行我的平面列表代码如下。

  <FlatList
       numColumns={3}
       data={this.state.images}
       renderItem={({ item }) => <SafeAreaView style={{ flex: 1, alignItems: 'center' }}>
            <Image style={{ margin: 5, height: 120, width: 120 }} 
                   source={{ uri:'data:image/png;base64,' + item.image }} />
                   </SafeAreaView>}
       keyExtractor={item => item.id}
                    />

Answer 1

您可以将 + 放在一个绝对位置的范围内，并将最后一个图像包裹在其中。这里还有更多的样式要做，但这只是开始。

添加图像的函数应该从旧的最后一个图像中删除跨度包装并将其添加到新图像中