使用React Native创建图像网格

Question

我希望获得在 React Native 中构建图像网格的帮助。

我正在尝试使用数组中的映射数据创建图像网格。映射部分工作正常，但图像没有按照我想要的方式放置。 这就是我正在寻找的（图像放置在红色方块的位置）：

这是我到目前为止的代码：

<ScrollView style={{flex: 1,  backgroundColor: 'yellow', 
    }} >
        {data.map(image => (
          <View style={styles.viewpic}>
           <Image style={styles.image} source={{uri:image.url }}/>
           </View> 
           ))}
       </ScrollView>
    </SafeAreaView>

这是我的 CSS：

viewpic: {
    flex: 1,
    flexWrap:'wrap',
    justifyContent: 'center',
    flexDirection: 'row',
     backgroundColor: 'blue',
  },
  image: {
    justifyContent: 'center',
    height: 115,
    width: 115,
    margin:6,
    backgroundColor: 'red',
  }

这是我目前得到的：

到目前为止，我尝试了我能想到的每一个 CSS 组合，但到目前为止没有任何效果。 我也尝试过 FLATLIST，但说实话，我无法正确转换当前的代码以“适应”Flatlists 的要求。

感谢大家的帮助！ 干杯！

Answer 1

这是一个 HTML 错误。 事实上，您为每个元素设置了 flex-wrap 样式，这就是为什么每行只有一个元素。 您必须将所有元素放入 flex-wrap div 中，它才会起作用。希望对您有帮助

           {data.map(image => (
           
           ))}
          

Answer 2

我找到了答案！ 我结合了 2 个教程 + 一些技巧，成功完成了！

首先，我使用“FlatList”构建了图像网格。我在这里找到了一个很棒的分步教程（不是我的页面，不附属）： YouTube 教程 一开始我得到了相同的结果，直到我添加“numColumns={ }”

代码如下：

...
  const numberOfCols = 3
...
return(

.

 {return item.date}}
        numColumns={numberOfCols}
        renderItem={({item, index})=>(
          
            
          
        )}
        />

然后我使用了本教程中的一些策略（不是我的页面，不附属）： Youtube 教程

我仍然需要调整 CSS，使其看起来更好，但到目前为止我对此很满意。

这是最终结果：