Créer une grille d'images à l'aide de React Native

Question

J'aimerais avoir de l'aide pour créer une grille d'images dans React Native.

J'essaie de créer une grille d'images en utilisant des données mappées dans un tableau. La partie mappage fonctionne bien, mais les images ne sont pas placées comme je le souhaite. Voici ce que je recherche (image placée là où se trouve le carré rouge) :

Voici mon code jusqu'à présent :

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

Voici mon CSS :

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

Voici ce que j'ai obtenu jusqu'à présent :

Jusqu'à présent, j'ai essayé toutes les combinaisons CSS auxquelles je peux penser, mais rien n'a fonctionné jusqu'à présent. J'ai également essayé FLATLIST, mais pour être honnête, je n'ai pas pu convertir correctement mon code actuel pour « répondre » aux exigences des Flatlists.

Merci à tous pour votre aide ! acclamations!

Answer 1

Il s'agit d'une erreur HTML. En fait, vous définissez le style flex-wrap pour chaque élément, c'est pourquoi il n'y a qu'un seul élément par ligne. Vous devez mettre tous les éléments dans un div flex-wrap pour que cela fonctionne. J'espère que cela vous aidera

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

Answer 2

J'ai trouvé la réponse ! J'ai combiné 2 tutos + quelques astuces et j'y suis parvenu !

Tout d'abord, j'ai construit la grille d'images en utilisant "FlatList". J'ai trouvé un excellent tutoriel étape par étape ici (pas sur ma page, non affilié) : Tutoriel YouTube Au début, j'ai obtenu le même résultat jusqu'à ce que j'ajoute "numColumns={ }"

Le code est le suivant :

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

.

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

Ensuite, j'ai utilisé quelques stratégies de ce tutoriel (pas de ma page, non affilié) : Tutoriel YouTube

J'ai encore besoin de peaufiner le CSS pour le rendre meilleur, mais jusqu'à présent, j'en suis satisfait.

Voici le résultat final :