Метод scrollToEnd

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

Синтаксис

ref.current.scrollToEnd({ animated });

Параметры

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

Пример

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

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

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

	return (
		<>
			<Pressable onPress={() => ref.current?.scrollToEnd({ animated: true })}>
				<Text>abcde</Text>
			</Pressable>
			<ScrollView ref={ref}>
				<Text>12345</Text>
				<Text>abcde</Text>
				<Text>12345</Text>
				<Text>abcde</Text>
			</ScrollView>
		</>
	);
}

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

Пример

Давайте прокрутим горизонтальный ряд к правому краю:

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

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

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

	return (
		<ScrollView ref={ref} horizontal>
			<Text style={styles.wide}>abcde</Text>
			<Text style={styles.wide}>12345</Text>
		</ScrollView>
	);
}

const styles = StyleSheet.create({
	wide: {
		width: 300,
	},
});

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

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

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