概要：このチュートリアルでは、React Native FlatListコンポーネントを使用して、項目のリストを効率的にレンダリングする方法を学習します。
React Native FlatListコンポーネントの概要
ScrollViewコンポーネントは、画面に表示されていないコンポーネントも含めて、ネストされたすべてのコンポーネントを一度にレンダリングします。これは、ネストされたコンポーネントが多数ある場合、効率的ではありません。
大きなリストを効率的にレンダリングするには、FlatListコンポーネントを使用できます。FlatListコンポーネントは、ネストされたコンポーネントを画面に表示される際に遅延的にレンダリングします。
さらに、FlatListコンポーネントは多くの便利な機能をサポートしています
- リストを水平または垂直に表示します。
- リストアイテムを複数の列にレンダリングします。
- リストヘッダー、リストフッター、およびアイテムセパレーターをサポートします。
- プルダウンして更新します。
- スクロール読み込み。
- ScrollToIndexをサポートします。
- 設定可能な可視性コールバック。
FlatListコンポーネントを使用するには、次の手順に従います
まず、react-nativeライブラリからFlatListコンポーネントをインポートします
import { FlatList } from 'react-native';Code language: JavaScript (javascript)次に、dataとrenderItem propsに引数を渡します
<FlatList
data={items}
renderItem={renderItem}
/>Code language: JavaScript (javascript)FlatListに必要なpropsは2つだけです
dataは、レンダリングするアイテムの配列（または配列のようなもの）です。renderItemは、各アイテムのレンダリング方法を定義するコールバック関数です。
renderItemコールバックはオブジェクトを受け取り、各アイテムのレンダリング方法を定義するJSX要素を返します
renderItem({ item, index, separators})Code language: JavaScript (javascript)このrenderItem関数では
itemはデータ配列内のアイテムです。indexは、データ配列内のitemのインデックスを格納します。separatorsは、アイテムセパレーターのレンダリングを処理するためのメソッドを提供するオブジェクトです。実際には、このパラメータを使用することはほとんどありません。
FlatListには、オプションですが重要なpropであるkeyExtractorがあります。
keyExtractorは、指定されたアイテムの一意のキーを抽出する関数を定義します。React Nativeは、キャッシングとアイテムの順序変更の追跡にキーを使用します。
デフォルトでは、keyExtractorはアイテムのkeyまたはidプロパティ（item.idまたはitem.key）を使用し、次にindexの使用にフォールバックします。そのため、リスト内のアイテムにidまたはkeyプロパティのいずれかがある場合は、keyExtractor propを無視できます。
次のアイテムをレンダリングするためにFlatListコンポーネントを使用する方法を説明します
export const items = [
{ id: 1, name: 'Apple', emoji: '🍎' },
{ id: 2, name: 'Banana', emoji: '🍌' },
{ id: 3, name: 'Cherry', emoji: '🍒' },
{ id: 4, name: 'Grapes', emoji: '🍇' },
{ id: 5, name: 'Carrot', emoji: '🥕' },
{ id: 6, name: 'Potato', emoji: '🥔' },
{ id: 7, name: 'Broccoli', emoji: '🥦' },
{ id: 8, name: 'Spinach', emoji: '🥬' },
{ id: 9, name: 'Milk', emoji: '🥛' },
{ id: 10, name: 'Cheese', emoji: '🧀' },
{ id: 12, name: 'Butter', emoji: '🧈' }
];Code language: JavaScript (javascript)基本的なFlatListの例
次の例は、FlatListコンポーネントを使用してアイテムをレンダリングする方法を示しています
import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';
const App = () => {
const renderItem = ({ item }) => {
return <View style={styles.listItem}>
<Text style={styles.listTitle}>{item.name}</Text>
<Text style={styles.listTitle}>{item.emoji}</Text>
</View>
}
return (
<SafeAreaView style={styles.container}>
<FlatList
style={styles.list}
data={items}
renderItem={renderItem} />
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
list: {
flex: 0.5,
fontSize: 16,
},
listItem: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 8,
},
listTitle: {
fontSize: 40
},
});
export default App;Code language: JavaScript (javascript)出力
仕組み。
まず、FlatListコンポーネントを使用してアイテムをレンダリングします
<FlatList
style={styles.list}
data={items}
renderItem={renderItem} />Code language: HTML, XML (xml)このコードでは、items配列、renderItem関数、およびstyles.listをFlatListコンポーネントに渡します。
次に、各アイテムをレンダリングするrenderItem関数を定義します
const renderItem = ({ item }) => {
return <View style={styles.listItem}>
<Text style={styles.listTitle}>{item.name}</Text>
<Text style={styles.listTitle}>{item.emoji}</Text>
</View>
}Code language: JavaScript (javascript)renderItem関数はアイテムを受け取り、そのnameとemojiを個別にレンダリングします。
nameとemojiを別々の列として表示するために、flexDirectionを'row'に、justifyContentを'space-between'に設定します。
水平リストの表示
次の例では、FlatListコンポーネントを使用して水平リストを表示します
import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';
const App = () => {
const renderItem = ({ item }) => {
return <View style={styles.listItem}>
<Text style={styles.listEmoji}>{item.emoji}</Text>
<Text style={styles.listTitle}>{item.name}</Text>
</View>
}
return (
<SafeAreaView style={styles.container}>
<FlatList
style={styles.list}
horizontal
data={items}
renderItem={renderItem} />
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
fontSize: 16,
},
listItem: {
alignItems: 'center',
height: 120,
padding: 16,
backgroundColor: '#efefef',
borderColor: '#ccc',
borderRadius: 16,
borderWidth: 1,
marginHorizontal: 8,
marginVertical: 4,
},
listEmoji: {
fontSize: 48,
},
listTitle: {
fontSize: 18,
},
});
export default App;Code language: JavaScript (javascript)複数列の表示
次の例では、numColumns propを使用してFlatListコンポーネントの列数を3に設定します
import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';
const App = () => {
const renderItem = ({ item }) => {
return <View style={styles.listItem}>
<Text style={styles.listEmoji}>{item.emoji}</Text>
</View>
}
return (
<SafeAreaView style={styles.container}>
<FlatList
style={styles.list}
data={items}
keyExtractor={item => item.id}
renderItem={renderItem}
numColumns={3}
/>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
list: {
fontSize: 16,
},
listItem: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 8,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
marginHorizontal: 8,
marginVertical: 4,
},
listEmoji: {
fontSize: 48,
},
});
export default App;
Code language: JavaScript (javascript)出力
ヘッダー、フッター、アイテムセパレーター付きのFlatList
次の例は、FlatListのリストヘッダー、リストフッター、およびアイテムセパレーターをレンダリングする方法を示しています
import { View, Text, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { items } from './data/items';
const App = () => {
const renderItem = ({ item }) => {
return <View style={styles.item}>
<Text style={styles.itemTitle}>{item.name}</Text>
<Text style={styles.itemTitle}>{item.emoji}</Text>
</View>
}
const header = () => (
<Text style={styles.header}>My Favorite List</Text>
);
const footer = () => (
<Text style={styles.footer}>Fruit, drinks and food.</Text>
);
const separator = () => (
<View style={styles.separator} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
style={styles.list}
data={items}
renderItem={renderItem}
ListHeaderComponent={header}
ListFooterComponent={footer}
ItemSeparatorComponent={separator}
/>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
list: {
flex: 0.5,
fontSize: 16,
},
header: {
fontSize: 32,
marginVertical: 12,
padding: 8,
},
footer: {
padding: 8,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 8,
},
itemTitle: {
fontSize: 24
},
separator: {
height: 1,
width: '100%',
backgroundColor: '#ccc',
},
});
export default App;Code language: JavaScript (javascript)出力
この例では、ListHeaderComponent、ListFooterComponent、およびItemSeparatorComponent propsを使用して、FlatListのリストヘッダー、リストフッター、およびアイテムセパレーターをレンダリングします。
まとめ
FlatListコンポーネントを使用して、大きなリストを効率的にレンダリングします。FlatListコンポーネントには、dataとrenderItem propsが必要です。dataはレンダリングするアイテムのリストを表し、renderItemは各アイテムのレンダリング方法を定義します。
