web-dev-qa-db-ja.com

React列を含むネイティブFlatList、最後のアイテムの幅

FlatListを使用して、2つの列に項目のリストを表示しています

<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}/> }
/>

カードコンポーネントは、いくつかのスタイルを持つ単なるビューです。

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

正常に機能していますが、アイテムの数が奇数の場合、最後の行にはアイテムが1つしか含まれず、そのアイテムは画面の幅いっぱいまで広がります。

アイテムを他のアイテムと同じ幅に設定するにはどうすればよいですか？

enter image description here

react-nativereact-native-flatlist
54
Escobar5

ここで試すことができるいくつかのことがあります。

A）カードの事前に定義された幅を設定する（設定した高さと同じかもしれませんか？）。次に、alignItemsを使用して、カードを中央または左に配置することができます-ここでどちらを使用するか不明です。

B）偶数枚のカードがある場合、このスペースを埋めるために最後に空のビューを追加できます。この方法は非常に不格好ですが、将来の要素のためにスペースを空けるときに役立ちます。

C）単にalignItems: 'space-betweenを使用します。これを使用してアイテムをセンタリングしますが、幅を定義するか、flex:0.5のようなものを使用する必要があります。

この状況のコンテキストを伝えるのは難しいので、flexboxをさらに調査して、これを支援することをお勧めします。上記の方法が役立つと思いますが、そうでない場合は、ここにいくつかのリンクがあります-

最初のリンク

2番目のリンク

番目のリンクリンク切れ

お役に立てれば。さらに説明が必要な場合は、質問してください

21
Ryan Turnbull

あなたの場合はflex：1/2を使用してください

したがって：itemにはflexの1 /（列の数）が必要です3列の場合、アイテムにはflex：1/3が必要です

20
Emilius Mfuruki

Dimensionsを使用してデバイスの現在の幅を取得し、レンダリングする列の数に基づいていくつかの計算を行い、マージンを差し引いて、minWidthとmaxWidthとして設定することができます。

例えば：

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>
15
skyplor

これは、FlatListを列で等間隔にスタイルする最もクリーンな方法です。

    <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

その理由は、カードのスタイルがflex: 1であるため、残っているすべてのスペースを拡張しようとします。カードのスタイルにmaxWidth: '50%'を追加することで修正できます

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