リストビューの使用
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でネットワーキングについて学ぶ必要があります。