Компонент ScrollView

Компонент ScrollView держит дочерние элементы и дает прокрутку по вертикали или по горизонтали. Прокрутку к точке и к концу вызывают методы через ссылку ref. Поведение клавиатуры задают перечисления KeyboardDismissMode и KeyboardShouldPersistTaps.

Синтаксис

<ScrollView>
	child1
	child2
</ScrollView>

Параметры

Параметр	Описание
`children`	Дочерние элементы, которые нужно прокручивать целиком.
`horizontal`	При `true` прокрутка идет по горизонтали, а не по вертикали.
`keyboardDismissMode`	Когда прятать клавиатуру при прокрутке. Строка из перечисления `KeyboardDismissMode`.
`keyboardShouldPersistTaps`	Останется ли клавиатура после касания по области прокрутки. Строка из перечисления `KeyboardShouldPersistTaps`.
`refreshControl`	Элемент `RefreshControl` для обновления по жесту вниз.

Методы

Метод	Описание
`scrollTo`	Прокручивает к заданным координатам `x` и `y`.
`scrollToEnd`	Прокручивает к последнему дочернему элементу.

Пример

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

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

export default function App() {
	return (
		<ScrollView>
			<Text>abcde</Text>
			<Text>12345</Text>
			<Text>abcde</Text>
			<Text>12345</Text>
		</ScrollView>
	);
}

На экране видна часть текстов, остальные откроются при прокрутке вниз.

Пример

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

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

export default function App() {
	return (
		<ScrollView horizontal>
			<Text style={styles.wide}>abcde</Text>
			<Text style={styles.wide}>12345</Text>
		</ScrollView>
	);
}

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

На экране тексты встанут в ряд и их можно листать влево и вправо.

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

компонент FlatList,
который строит только видимые пункты списка
компонент RefreshControl,
который обновляет список по жесту вниз
перечисление KeyboardDismissMode,
которое прячет клавиатуру при прокрутке
компонент View,
который держит дочерние элементы без прокрутки