フラットリストを使って、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つのアイテムしか含まれず、そのアイテムが画面の幅いっぱいに伸びてしまいます。
どうすれば、その項目を他の項目と同じ幅にすることができますか?
ここではいくつかの方法を試してみましょう。
A) カードの幅をあらかじめ設定しておく(設定した高さと同じにするとか)。次に、alignItems
を使って、カードを中央または左に配置することができます - ここではどちらを希望しているのかわかりません。
B) カードの枚数が偶数の場合は、最後に空のビューを追加して、このスペースを埋めることができます。この方法はかなり不便ですが、将来の要素のためにスペースを残そうとするときには便利です。
C) 単純にalignItems: 'space-between
を使用します。私はアイテムを中央に配置するためにこれを使用するのが好きですが、幅を定義するか、flex:0.5
のようなものを使用する必要があります。
この状況の文脈がわかりにくいので、フレックスボックスについてもっと詳しく調べてみることをお勧めします。上記の方法で解決すると思いますが、解決しない場合は、以下のリンクを参照してください。
[3つ目のリンク]( Link Broken
ご参考になれば幸いです。さらに詳しい説明が必要な場合は、お問い合わせください。
デバイスの現在の幅を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>