リストビューの使用
React Nativeは、データのリストを表示するための一連のコンポーネントを提供しています。一般的には、FlatList または SectionList のいずれかを使用することになります。
FlatList
コンポーネントは、変化するが同様の構造を持つデータのスクロール可能なリストを表示します。FlatList
は、アイテムの数が時間とともに変化する可能性のある、長いデータリストに適しています。より汎用的なScrollView
とは異なり、FlatList
はすべての要素を一度にではなく、現在画面に表示されている要素のみをレンダリングします。
FlatList
コンポーネントには、data
とrenderItem
という2つのpropsが必要です。data
はリストの情報源です。renderItem
は、情報源から1つのアイテムを受け取り、レンダリングするためのフォーマットされたコンポーネントを返します。
この例では、ハードコードされたデータの基本的なFlatList
を作成します。data
propsの各アイテムはText
コンポーネントとしてレンダリングされます。そして、FlatListBasics
コンポーネントがFlatList
とすべてのText
コンポーネントをレンダリングします。
iOSのUITableView
のように、論理的なセクションに分割されたデータセット(おそらくセクションヘッダー付き)をレンダリングしたい場合は、SectionListを使用するのが良いでしょう。
リストビューの最も一般的な用途の1つは、サーバーから取得したデータを表示することです。そのためには、React Nativeでのネットワーキングについて学ぶ必要があります。