Метод scrollToIndex

Метод scrollToIndex вызывают на ссылке ref компонента FlatList. Он ставит пункт с номером index в видимую область. Положение пункта в окне задает viewPosition: 0 у начала, 0.5 по центру, 1 у конца.

Синтаксис

ref.current.scrollToIndex({ index, animated, viewPosition });

Параметры

Параметр	Описание
`index`	Номер пункта в массиве `data`, с нуля.
`animated`	При `true` прокрутка идет с анимацией.
`viewPosition`	Доля высоты окна: где окажется выбранный пункт. `0` у верхнего края, `0.5` по центру, `1` у нижнего.

Пример

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

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

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

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

	return (
		<>
			<Pressable onPress={() => ref.current?.scrollToIndex({ index: 1, animated: true })}>
				<Text>abcde</Text>
			</Pressable>
			<FlatList
				ref={ref}
				data={data}
				keyExtractor={(item, index) => String(index)}
				renderItem={({ item }) => <Text>{item}</Text>}
			/>
		</>
	);
}

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

Пример

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

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

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

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

	return (
		<>
			<Pressable
				onPress={() =>
					ref.current?.scrollToIndex({ index: 2, animated: true, viewPosition: 0.5 })
				}
			>
				<Text>12345</Text>
			</Pressable>
			<FlatList
				ref={ref}
				data={data}
				keyExtractor={(item, index) => String(index)}
				renderItem={({ item }) => <Text>{item}</Text>}
			/>
		</>
	);
}

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

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

метод scrollToOffset,
который прокручивает к смещению в пикселях
метод scrollToEnd,
который прокручивает к последнему пункту
компонент FlatList,
который строит список по видимым пунктам
метод scrollToLocation,
который прокручивает к пункту в секции