Réagir Natif FlatList avec des colonnes, le Dernier point de la largeur de
j'utilise une FlatList pour afficher une liste d'éléments en 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 la carte n'est qu'une vue avec quelques styles:
<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>
cela fonctionne bien, mais si le nombre d'items est impair, la dernière rangée ne contient qu'un item et cet item s'étend sur toute la largeur de l'écran.
Comment puis-je régler l'élément de la même largeur que les autres?
3 réponses
il y a 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 - incertain de 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 grotesque mais utile en essayant de laisser de l'espace pour le futur élément.
C) utilisez simplement alignItems: 'space-between j'aime l'utiliser de ce centre d'éléments, mais vous pouvez définir la largeur, ou utiliser quelque chose comme flex:0.5
je suggère de faire des recherches sur flexbox pour vous aider, car il est difficile de dire le contexte de cette situation. Je suppose que les méthodes ci-dessus aideront, mais si non, voici quelques liens pour vous de regarder -
Espérons que cette aide. Si vous avez besoin de plus de précisions n'hésitez
Vous pouvez essayer d'obtenir la largeur actuelle de l'appareil via les Dimensions, faire quelques calculs basés sur le nombre de colonnes que vous voulez rendre, moins les marges et régler cela comme la minWidth et la 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>
vérifier si le nombre d'éléments est impair, si le nombre est impair, donner un style particulier pour le 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:{
}