リストビューの使用

React Nativeは、データのリストを表示するための一連のコンポーネントを提供します。通常は、FlatList または SectionList のどちらかを使用することになります。

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

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

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

iOSの UITableView と同様に、データセットを論理的なセクションに分割して、セクションヘッダーとともにレンダリングしたい場合は、SectionList が最適な方法です。

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