メインコンテンツへスキップ

リストビューの使用

React Nativeは、データのリストを表示するための一連のコンポーネントを提供しています。一般的には、FlatList または SectionList のいずれかを使用することになります。

FlatListコンポーネントは、変化するが同様の構造を持つデータのスクロール可能なリストを表示します。FlatListは、アイテムの数が時間とともに変化する可能性のある、長いデータリストに適しています。より汎用的なScrollViewとは異なり、FlatListはすべての要素を一度にではなく、現在画面に表示されている要素のみをレンダリングします。

FlatListコンポーネントには、datarenderItemという2つのpropsが必要です。dataはリストの情報源です。renderItemは、情報源から1つのアイテムを受け取り、レンダリングするためのフォーマットされたコンポーネントを返します。

この例では、ハードコードされたデータの基本的なFlatListを作成します。data propsの各アイテムはTextコンポーネントとしてレンダリングされます。そして、FlatListBasicsコンポーネントがFlatListとすべてのTextコンポーネントをレンダリングします。

iOSのUITableViewのように、論理的なセクションに分割されたデータセット(おそらくセクションヘッダー付き)をレンダリングしたい場合は、SectionListを使用するのが良いでしょう。

リストビューの最も一般的な用途の1つは、サーバーから取得したデータを表示することです。そのためには、React Nativeでのネットワーキングについて学ぶ必要があります。