React native 中的 Flatlist 与 map 回调列

Question

我试图以每行 3 张图像的形式显示一堆图像，并使用 Flatlist 我收到此错误“无法对未安装的组件执行 React 状态更新”。我尝试了所有关于使用卸载标志的方法，但问题仍然存在。

但是，注意到使用 map() 回调函数不存在该问题。 问题是如何使用 map() 创建视图以便在每行渲染 3 个图像。 是否有可能使用 map() 创建具有 3 列的视图？

Answer 1

如果您的问题是“问题是如何使用 map() 创建视图以便在每行渲染 3 个图像。”那么我会用 .map() 答案而不是平面列表答案来回答你的问题。

对于 .map() 它将渲染与调用 .map 的数组中一样多的图像。该场景中的间距更多地由您将其包裹在其中的容器完成，另外您可以为每个图像指定“33%”的宽度。意思是，你会想要这样的东西：

<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
    {YOURARRAY.map(() => {
      return(
        ---- your image with the style {width: '33%'} here ----
    )}
<View>

React native 中的 Flatlist 与 map 回调列

Flatlist vs map callback columns in React native

react-native

react-native-flatlist