Buat grid imej menggunakan React Native

Question

Saya ingin membantu membina grid imej dalam React Native.

Saya cuba mencipta grid imej menggunakan data yang dipetakan dalam tatasusunan. Bahagian pemetaan berfungsi dengan baik, tetapi imej tidak diletakkan seperti yang saya mahu. Inilah yang saya cari (imej diletakkan di tempat petak merah):

Ini kod saya setakat ini:

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

Ini CSS saya:

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

Ini yang saya dapat setakat ini:

Setakat ini, saya telah mencuba setiap kombinasi CSS yang saya boleh fikirkan, tetapi tiada apa yang berjaya setakat ini. Saya juga mencuba FLATLIST, tetapi sejujurnya, saya tidak dapat menukar kod semasa saya dengan betul untuk "menyesuaikan" keperluan Flatlists.

Terima kasih semua atas bantuan anda! sorakan!

Answer 1

Ini ialah ralat HTML. Malah, anda menetapkan gaya flex-wrap untuk setiap elemen, itulah sebabnya terdapat hanya satu elemen bagi setiap baris. Anda perlu meletakkan semua elemen ke dalam div flex-wrap agar ia berfungsi. Semoga ia membantu anda

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

Answer 2

Saya jumpa jawapannya! Saya menggabungkan 2 tutorial + beberapa petua dan saya berjaya!

Mula-mula, saya membina grid imej menggunakan "FlatList". Saya menemui tutorial langkah demi langkah yang hebat di sini (bukan halaman saya, bukan bersekutu): Tutorial YouTube Pada mulanya saya mendapat keputusan yang sama sehingga saya menambah "numColumns={ }"

Kod adalah seperti berikut:

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

.

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

Kemudian saya menggunakan beberapa strategi dari tutorial ini (bukan halaman saya, tidak bergabung): Tutorial Youtube

Saya masih perlu mengubah suai CSS untuk menjadikannya kelihatan lebih baik, tetapi setakat ini saya berpuas hati dengannya.

Ini adalah keputusan akhir: