Метод scrollToLocation

Метод scrollToLocation вызывают на ссылке ref компонента SectionList. Он ставит в видимую область пункт с номером itemIndex внутри секции с номером sectionIndex. Положение в окне задает viewPosition так же, как у scrollToIndex.

Синтаксис

ref.current.scrollToLocation({ sectionIndex, itemIndex, animated, viewPosition });

Параметры

Параметр	Описание
`sectionIndex`	Номер секции в массиве `sections`, с нуля.
`itemIndex`	Номер пункта внутри секции, с нуля.
`animated`	При `true` прокрутка идет с анимацией.
`viewPosition`	Доля высоты окна для выбранного пункта. `0` у начала, `0.5` по центру, `1` у конца.

Пример

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

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

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

export default function App() {
	const ref = useRef(null);

	return (
		<>
			<Pressable
				onPress={() =>
					ref.current?.scrollToLocation({ sectionIndex: 0, itemIndex: 1, animated: true })
				}
			>
				<Text>abcde</Text>
			</Pressable>
			<SectionList
				ref={ref}
				sections={sections}
				keyExtractor={(item, index) => String(index) + item}
				renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
				renderItem={({ item }) => <Text>{item}</Text>}
			/>
		</>
	);
}

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

Пример

Давайте откроем пункт из второй секции по центру экрана:

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

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

export default function App() {
	const ref = useRef(null);

	return (
		<>
			<Pressable
				onPress={() =>
					ref.current?.scrollToLocation({
						sectionIndex: 1,
						itemIndex: 0,
						animated: true,
						viewPosition: 0.5,
					})
				}
			>
				<Text>12345</Text>
			</Pressable>
			<SectionList
				ref={ref}
				sections={sections}
				keyExtractor={(item) => item}
				renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
				renderItem={({ item }) => <Text>{item}</Text>}
			/>
		</>
	);
}

На экране первый пункт секции 'B' окажется ближе к середине прокрутки.

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

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