Метод scrollToEnd

Метод scrollToEnd вызывают на ссылке ref компонента FlatList. Он сдвигает прокрутку так, чтобы был виден конец списка.

Синтаксис

ref.current.scrollToEnd({ animated });

Параметры

Параметр	Описание
`animated`	При `true` прокрутка к концу идет с анимацией.

Пример

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

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

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

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

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

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

Пример

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

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

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

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

	useEffect(() => {
		ref.current?.scrollToEnd({ animated: false });
	}, []);

	return (
		<FlatList
			ref={ref}
			data={data}
			keyExtractor={(item, index) => String(index)}
			renderItem={({ item }) => <Text>{item}</Text>}
		/>
	);
}

На экране при загрузке сразу виден нижний пункт списка.

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

метод scrollToEnd,
который прокручивает ScrollView к концу
метод scrollToIndex,
который прокручивает к заданному номеру
метод scrollToOffset,
который прокручивает к смещению
компонент FlatList,
который строит список по видимым пунктам