[解決済み] React Native のフラットリスト、カラム、最後のアイテム幅

質問

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つの項目しかなく、その項目が画面の幅いっぱいに伸びてしまいます。

どうすれば、その項目を他の項目と同じ幅にすることができるのでしょうか？

どのように解決するのですか？

いくつかの方法を試してみてください。

A) カードにあらかじめ幅を設定する（設定した高さと同じかもしれません）。それから alignItems を使って、カードを中央または左側に配置することができます。

B) カードの数が偶数の場合、このスペースを埋めるために、最後に空のビューを追加することができます。この方法はかなり不便ですが、将来の要素のためにスペースを残しておこうとするときに便利です。

C) 単純に alignItems: 'space-between 私はこれをアイテムの中央揃えに使いたいのですが、幅を定義する必要がありますし、次のようなものを使うこともできます。 flex:0.5

この状況の背景を伝えるのが難しいので、フレックスボックスについてもっと研究することをお勧めします。上記の方法が役立つと思いますが、そうでない場合は、以下のリンクを参考にしてください -。

最初のリンク

2つ目のリンク

3番目のリンク <サブ リンク切れ

これが役に立つことを願っています。さらに詳しい説明が必要な場合は、お問い合わせください。