【ReactNative開発】FlatListで複数列のグリッドを作成する

こんばんは。今日は、ReactNativeで複数列のグリッドを作成する方法について解説します。

それではまいります。

実現したいこと

インスタグラムのタイムラインのような、N列のグリッド表示を実現したかったです。

実現方法

React NativeのFlatListコンポーネントを利用すれば実現できます。

FlatListといえば、以下のように、Listを作るために利用することが一般的だと思いますが、numColumnsなるパラメータがあり、ここを２以上の数値に設定することで、上記のようなグリッド表示ができるようになりました！

＜FlatListのnumColumnsパラメータ＞

https://reactnative.dev/docs/flatlist#numcolumns

＜実装＞

<FlatList
       data={resultSet}
       keyExtractor={(item)=>item.id}
       numColumns={2}　★ここ
       renderItem={({item})=>(
            <それぞれのアイテム>
       )}
/>

また、React Native純正のFlatListだけでなく、UIライブラリのNative BaseにもFlatList（純正のFlatListをimplementしていると書いている）でも、同じことが実現できますので、どちらを使っても良いと思います。

以上、短いですがこの記事はここまで。少しでもお役に立ちましたら幸いです。

おしまい