Метод scrollToOffset

Метод scrollToOffset вызывают на ссылке ref компонента FlatList. Он сдвигает содержимое так, чтобы заданное смещение offset оказалось у начала прокрутки по главной оси.

Синтаксис

ref.current.scrollToOffset({ offset, animated });

Параметры

Параметр	Описание
`offset`	Смещение содержимого списка в логических пикселях от начала.
`animated`	При `true` прокрутка идет с анимацией.

Пример

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

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?.scrollToOffset({ offset: 80, animated: true })}>
				<Text>abcde</Text>
			</Pressable>
			<FlatList
				ref={ref}
				data={data}
				keyExtractor={(item, index) => String(index)}
				renderItem={({ item }) => <Text>{item}</Text>}
			/>
		</>
	);
}

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

Пример

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

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

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

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

	return (
		<>
			<Pressable onPress={() => ref.current?.scrollToOffset({ offset: 0, animated: false })}>
				<Text>12345</Text>
			</Pressable>
			<FlatList
				ref={ref}
				data={data}
				keyExtractor={(item, index) => String(index)}
				renderItem={({ item }) => <Text>{item}</Text>}
			/>
		</>
	);
}

На экране прокрутка сразу вернется к первому пункту.

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

метод scrollToIndex,
который прокручивает к номеру пункта
метод scrollToEnd,
который прокручивает к последнему пункту
метод scrollTo,
который прокручивает ScrollView к координатам
компонент FlatList,
который строит список по видимым пунктам