使用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，使其看起來更好，但到目前為止我對此很滿意。

這是最終結果：