Метод event

Метод event класса Animated строит обработчик для нативного события. Карта аргументов указывает, какое поле события пишет в Value. Частый случай - прокрутка ScrollView и поле смещения.

Синтаксис

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

Параметры

Параметр	Описание
`карта аргументов`	Массив с путями от события к анимируемым значениям.
`конфиг`	Настройки вроде `useNativeDriver` для связанной анимации.

Пример

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

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: 120, justifyContent: 'center' }}>
				<Text>abcde</Text>
			</View>
			<View style={{ height: 400 }}>
				<Text>12345</Text>
			</View>
		</Animated.ScrollView>
	);
}

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

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

метод diffClamp,
который ограничивает приращение при прокрутке
компонент Animated.ScrollView,
который принимает обработчик прокрутки
компонент ScrollView,
который прокручивает дочерние элементы
метод interpolate,
который переводит смещение в другой диапазон