wake-up-neo.com

Reagieren Sie native FlatList mit Spalten, Letzte Elementbreite

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. Dieses Element erstreckt sich über die gesamte Bildschirmbreite.

Wie kann ich den Artikel auf die gleiche Breite wie die anderen einstellen?

 enter image description here

react-nativereact-native-flatlist
39
Escobar5

Es gibt ein paar Dinge, die Sie hier ausprobieren können.

A) Einstellen einer vordefinierten Breite für die Karte (entspricht möglicherweise der eingestellten Höhe?). Dann können Sie alignItems verwenden, um die Karte in der Mitte oder auf der linken Seite zu platzieren.

B) Bei einer geraden Anzahl von Karten können Sie am Ende eine leere Ansicht hinzufügen, um dieses Feld zu füllen. Ich finde diese Methode ziemlich klobig, aber nützlich, wenn versucht wird, Raum für zukünftige Elemente zu lassen.

C) Verwenden Sie einfach alignItems: 'space-between, ich benutze dies gerne zum Zentrieren von Elementen, aber Sie müssen die Breite definieren oder etwas wie flex:0.5 verwenden.

Ich schlage vor, mehr über Flexbox zu erfahren, um Ihnen dabei zu helfen, da es schwierig ist, den Kontext dieser Situation zu erkennen. Ich gehe davon aus, dass die oben genannten Methoden helfen, aber wenn nicht, hier sind einige Links, die Sie sich ansehen können -

Erster Link

Zweiter Link

Dritter LinkLink gebrochen

Hoffe das hilft. Wenn Sie weitere Informationen benötigen, fragen Sie einfach nach 

14
Ryan Turnbull

Sie können versuchen, die aktuelle Breite des Geräts über Dimensionen abzurufen, einige Berechnungen auf der Grundlage der Anzahl der Spalten, die Sie rendern möchten, abzüglich der Ränder, und als MinWidth und MaxWidth festlegen.

Zum Beispiel:

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

Dies ist die sauberste Methode, um ein FlatList mit Spalten und gleichmäßigem Abstand zu gestalten:

    <FlatList style={{margin:5}}
        numColumns={2}                  // set number of columns 
        columnWrapperStyle={style.row}  // space them out evenly

        data={this.state.items}
        keyExtractor={(item, index) => item.id }
        renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
    />       

    const style = StyleSheet.create({
        row: {
            flex: 1,
            justifyContent: "space-around"
        }
    });
3
jasonleonhard

verwenden Sie für Ihren Fall flex: 1/2

daher: Ihr Artikel sollte flex von 1/(Anzahl der Spalten) haben, wenn Sie 3 Spalten haben, sollte Ihr Artikel flex haben: 1/3

2
Emilius Mfuruki

prüfen Sie, ob die Anzahl der Elemente ungerade ist, wenn die Anzahl ungerade ist, geben Sie dem letzten Element einen besonderen Stil.

 {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

Der Grund dafür ist, dass Ihre Karte den Stil flex: 1 hat. Daher wird versucht, den verbleibenden Speicherplatz zu vergrößern. Sie können dies beheben, indem Sie maxWidth: '50%' zu Ihrem Kartenstil hinzufügen

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