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

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

それではまいります。

実現したいこと

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

Instagramのタイムライン

実現方法

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

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

FlatListで作成できる基本的なリスト

<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していると書いている)でも、同じことが実現できますので、どちらを使っても良いと思います。

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

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。