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

リストビューの使用

React Nativeには、データリストを表示するためのコンポーネントスイートが用意されています。一般的には、FlatListまたはSectionListのいずれかを使用します。

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

FlatList コンポーネントには、datarenderItem の2つのプロパティが必要です。 data はリストの情報源です。 renderItem はソースから1つの項目を取り出して、フォーマットされたコンポーネントをレンダリングします。

この例では、ハードコードされたデータの基本的な FlatList を作成しています。 data プロパティ内の各項目は、 Text コンポーネントとしてレンダリングされます。 その後、 FlatListBasics コンポーネントは FlatListText コンポーネントをすべてレンダリングします。

iOSの UITableView に似て、論理的なセクションに分割されたデータセットをレンダリングする場合(セクションヘッダー付きなど)、SectionList が適しています。

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