Ich verwende eine FlatList, um eine Liste von Elementen in zwei Spalten anzuzeigen
<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}/> }
/>
Die Kartenkomponente ist nur eine Ansicht mit einigen Stilen:
<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>
Es funktioniert einwandfrei, aber wenn die Anzahl der Elemente ungerade ist, enthält die letzte Zeile nur ein Element und dieses Element erstreckt sich über die gesamte Breite des Bildschirms.
Wie kann ich den Artikel auf die gleiche Breite wie die anderen einstellen?
quelle
Verwenden Sie für Ihren Fall flex: 1/2
Deshalb: Ihr Artikel sollte einen Flex von 1 / (Anzahl der Spalten) haben. Wenn Sie 3 Spalten haben, sollte Ihr Artikel einen Flex von 1/3 haben
quelle
Sie können versuchen, die aktuelle Breite des Geräts über Bemaßungen abzurufen, anhand der Anzahl der zu rendernden Spalten abzüglich der Ränder zu rechnen und diese als minWidth und maxWidth festzulegen.
Zum Beispiel:
quelle
flex:1
den Fall mit einer ungeraden Spalte begrenzen wollenDies ist die sauberste Art, ein
FlatList
mit Spalten und gleichmäßigem Abstand zu gestalten:quelle
Der Grund dafür ist, dass Ihre Karte Stil hat
flex: 1
und daher versucht, den gesamten verbleibenden Speicherplatz zu erweitern. Sie können das Problem beheben, indem SiemaxWidth: '50%'
es Ihrem Kartenstil hinzufügenquelle
@ Emilius Mfuruki Vorschlag ist gut. Aber wenn Sie Text mit unterschiedlicher Länge haben, funktioniert er nicht perfekt.
Dann const {height, width} = Dimensions.get ('window'); const itemWidth = (width - (MarginFromTheSide * 2 + MarginInBetween * (n-1))) / n;
Verwenden Sie diese Breite in Ihrer Ansicht.
Verwenden Sie in FlatList columnWrapperStyle = {{flex: 1, rechtfertigen Sie den Inhalt: 'Leerzeichen',}}
Funktioniert perfekt.
quelle
Sie können ListFooterComponent = {this.renderFooter} verwenden
quelle
benutze einfach flex: 0.5 und width: '50% '
quelle