web-dev-qa-db-fra.com

Réagissez Native FlatList avec colonnes, Largeur du dernier élément

J'utilise une liste à plat pour afficher une liste d'éléments sur deux colonnes

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

Le composant de carte est juste une vue avec quelques styles:

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

Cela fonctionne bien, mais si le nombre d'éléments est impair, la dernière ligne ne contient qu'un seul élément et cet élément s'étend sur toute la largeur de l'écran.

Comment définir l'élément avec la même largeur que les autres?

 enter image description here

react-nativereact-native-flatlist
39
Escobar5

Theres quelques choses que vous pouvez essayer ici.

A) Définir une largeur prédéfinie pour la carte (peut-être égale à la hauteur que vous avez définie?). Ensuite, vous pouvez utiliser alignItems pour que la carte soit positionnée au milieu ou à gauche - Vous ne savez pas exactement ce que vous vouliez ici.

B) S'il y a un nombre pair de cartes, vous pouvez ajouter une vue vide à la fin afin de remplir cet espace. Je trouve cette méthode assez maladroite mais utile lorsque vous essayez de laisser de la place pour des éléments futurs.

C) Utilisez simplement alignItems: 'space-between, j'aime bien l'utiliser pour centrer les éléments, mais vous devrez définir la largeur ou utiliser quelque chose comme flex:0.5

Je suggère de faire plus de recherches dans flexbox pour vous aider, car il est difficile de dire le contexte de cette situation. Je suppose que les méthodes ci-dessus vous aideront, mais si ce n’est pas le cas, voici quelques liens à consulter -

Premier lien

Deuxième lien

Troisième lienLien brisé

J'espère que cela t'aides. Si vous avez besoin de plus amples précisions - il suffit de demander 

14
Ryan Turnbull

Vous pouvez essayer d'obtenir la largeur actuelle du périphérique via Dimensions, faire des calculs en fonction du nombre de colonnes que vous souhaitez restituer, en excluant les marges et en les définissant comme minWidth et maxWidth.

Par exemple:

const {height, width} = Dimensions.get('window');
const itemWidth = (width - 15) / 2;

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>
13
skyplor

pour votre cas, utilisez flex: 1/2

donc: Votre item devrait avoir flex de 1/(nombre de colonnes) si vous avez 3 colonnes, votre article devrait avoir flex: 1/3

2
Emilius Mfuruki

vérifiez si le nombre d'éléments est impair, si le nombre est impair, donnez un style spécial au dernier élément . par exemple)

 {this.props.count%2!= 0?
                <View style={this.props.entireList.indexOf(item) === this.props.entireList.length-1 ?stles.v1:styles.v2}></View>
 v1:{
 width:'48%'
}
v2:{
}
0
Supriya C S

La raison en est que votre carte a le style flex: 1; Vous pouvez y remédier en ajoutant maxWidth: '50%' à votre style de carte.

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130, maxWidth: '50%'}} ></View>
0
Tùng Nguyễn