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!