Компонент Animated.ScrollView

Компонент Animated.ScrollView совпадает с ScrollView. Обработчик onScroll часто строят через Animated.event. В style тоже можно передать анимируемые поля.

Синтаксис

<Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
	...
</Animated.ScrollView>

Параметры

Параметр	Описание
`style`	Стиль области прокрутки с поддержкой Value. Остальные параметры смотрите у `ScrollView`.
`children`	Длинный столбец или ряд дочерних элементов.

Пример

Давайте запишем вертикальное смещение в Value:

import { useRef } from 'react';
import { Animated, View, Text } from 'react-native';

export default function App() {
	const scrollY = useRef(new Animated.Value(0)).current;

	const onScroll = Animated.event(
		[{ nativeEvent: { contentOffset: { y: scrollY } } }],
		{ useNativeDriver: false },
	);

	return (
		<Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
			<View style={{ height: 200, justifyContent: 'center' }}>
				<Text>abcde</Text>
			</View>
			<View style={{ height: 400 }}>
				<Text>12345</Text>
			</View>
		</Animated.ScrollView>
	);
}

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

Пример

Давайте приглушим верхний блок при прокрутке через interpolate:

import { useRef } from 'react';
import { Animated, View, Text } from 'react-native';

export default function App() {
	const scrollY = useRef(new Animated.Value(0)).current;

	const onScroll = Animated.event(
		[{ nativeEvent: { contentOffset: { y: scrollY } } }],
		{ useNativeDriver: true },
	);

	const headerOpacity = scrollY.interpolate({
		inputRange: [0, 80],
		outputRange: [1, 0.3],
		extrapolate: 'clamp',
	});

	return (
		<View style={{ flex: 1 }}>
			<Animated.View style={{ opacity: headerOpacity, padding: 12 }}>
				<Text>abcde</Text>
			</Animated.View>
			<Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
				<View style={{ height: 500 }}>
					<Text>12345</Text>
				</View>
			</Animated.ScrollView>
		</View>
	);
}

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

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

компонент ScrollView,
обычная прокрутка без Animated.event
метод event,
который связывает onScroll и Value
метод diffClamp,
который прячет шапку при прокрутке
метод scrollTo,
который программно сдвигает прокрутку