Erstellen Sie ein Bildraster mit React Native

Question

Ich würde gerne beim Aufbau eines Bildrasters in React Native helfen.

Ich versuche, ein Bildraster mit zugeordneten Daten in einem Array zu erstellen. Der Mapping-Teil funktioniert gut, aber die Bilder werden nicht so platziert, wie ich es möchte. Das ist es, was ich suche (Bild dort platziert, wo das rote Quadrat ist):

Das ist mein bisheriger Code:

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

Das ist mein CSS:

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

Das habe ich bisher bekommen:

Bisher habe ich jede CSS-Kombination ausprobiert, die mir einfällt, aber bisher hat nichts funktioniert. Ich habe auch FLATLIST ausprobiert, aber ehrlich gesagt konnte ich meinen aktuellen Code nicht richtig konvertieren, um den Anforderungen von Flatlists „zu entsprechen“.

Vielen Dank an alle für eure Hilfe! Prost!

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，使其看起来更好，但到目前为止我对此很满意。

这是最终结果：