Компонент SectionList

Компонент SectionList принимает массив секций. Каждая секция содержит заголовок и массив пунктов data. Отрисовку пункта и заголовка секции задают функции в параметрах. Прокрутку к пункту внутри секции вызывают методом через ссылку ref.

Синтаксис

<SectionList
	sections={sections}
	renderItem={renderItem}
	renderSectionHeader={renderSectionHeader}
	keyExtractor={keyExtractor}
/>

Параметры

Параметр	Описание
`sections`	Массив секций. Каждый элемент - объект с полями `title` и `data`.
`renderItem`	Функция отрисовки пункта. Получает объект с полями `item` и `index`.
`renderSectionHeader`	Функция отрисовки заголовка секции. Получает объект секции.
`keyExtractor`	Функция ключа строки. Получает `item` и `index`, возвращает строку.
`refreshControl`	Элемент `RefreshControl` для обновления по жесту вниз.

Методы

Метод	Описание
`scrollToLocation`	Прокручивает список к пункту в заданной секции.

Пример

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

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

const sections = [
	{ title: 'abcde', data: ['12345', 'abcde'] },
	{ title: '12345', data: ['abcde'] },
];

export default function App() {
	return (
		<SectionList
			sections={sections}
			keyExtractor={(item, index) => item + String(index)}
			renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
			renderItem={({ item }) => <Text>{item}</Text>}
		/>
	);
}

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

Пример

Давайте добавим вторую секцию с одним пунктом:

import { SectionList, Text, StyleSheet } from 'react-native';

const sections = [
	{ title: 'A', data: ['abcde'] },
	{ title: 'B', data: ['12345', 'abcde'] },
];

export default function App() {
	return (
		<SectionList
			sections={sections}
			keyExtractor={(item) => item}
			renderSectionHeader={({ section }) => (
				<Text style={styles.header}>{section.title}</Text>
			)}
			renderItem={({ item }) => <Text>{item}</Text>}
		/>
	);
}

const styles = StyleSheet.create({
	header: {
		padding: 8,
	},
});

На экране заголовки 'A' и 'B' разделят пункты на две группы.

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

метод scrollToLocation,
который прокручивает к пункту в секции
компонент FlatList,
который строит плоский список без секций
компонент ScrollView,
который прокручивает произвольное содержимое
компонент RefreshControl,
который обновляет список по жесту вниз