Компонент FlatList

Компонент FlatList принимает массив данных и функцию отрисовки каждого пункта. На экран попадают только строки в видимой области и рядом с ней. Прокрутку к пункту и смещению вызывают методы через ссылку ref.

Синтаксис

<FlatList
	data={data}
	renderItem={renderItem}
	keyExtractor={keyExtractor}
/>

Параметры

Параметр	Описание
`data`	Массив элементов списка. Каждый элемент передают в `renderItem`.
`renderItem`	Функция отрисовки пункта. Получает объект с полями `item` и `index`.
`keyExtractor`	Функция ключа строки. Получает `item` и `index`, возвращает строку.
`horizontal`	При `true` пункты идут в горизонтальный ряд с прокруткой.
`refreshControl`	Элемент `RefreshControl` для обновления по жесту вниз.
`keyboardDismissMode`	Когда прятать клавиатуру при прокрутке. Строка из перечисления `KeyboardDismissMode`.
`keyboardShouldPersistTaps`	Поведение клавиатуры после касания. Строка из перечисления `KeyboardShouldPersistTaps`.

Методы

Метод	Описание
`scrollToIndex`	Прокручивает список к пункту с заданным номером.
`scrollToOffset`	Прокручивает список к заданному смещению в пикселях.
`scrollToEnd`	Прокручивает список к последнему пункту.

Пример

Давайте выведем короткий список строк:

import { FlatList, Text } from 'react-native';

const data = ['abcde', '12345'];

export default function App() {
	return (
		<FlatList
			data={data}
			keyExtractor={(item, index) => String(index)}
			renderItem={({ item }) => <Text>{item}</Text>}
		/>
	);
}

На экране появятся две строки одна под другой с прокруткой при длинном массиве.

Пример

Давайте зададим ключ из содержимого пункта:

import { FlatList, Text } from 'react-native';

const data = ['abcde', '12345', 'abcde'];

export default function App() {
	return (
		<FlatList
			data={data}
			keyExtractor={(item) => item + '-key'}
			renderItem={({ item, index }) => (
				<Text>{item} #{index}</Text>
			)}
		/>
	);
}

На экране у каждой строки будет свой номер после текста пункта.

Смотрите также

компонент SectionList,
который группирует пункты по секциям
компонент ScrollView,
который прокручивает все дочерние элементы сразу
метод scrollToIndex,
который прокручивает к номеру пункта
компонент RefreshControl,
который обновляет список по жесту вниз