Метод diffClamp

Метод diffClamp класса Animated следит за приращением Value и не дает ему выйти за min и max. Так прячут шапку при прокрутке вниз и показывают при прокрутке вверх.

Синтаксис

const clamped = Animated.diffClamp(scrollY, 0, 80);

Параметры

Параметр	Описание
`value`	Исходное `Value`, обычно смещение прокрутки.
`min`	Нижняя граница накопленного сдвига.
`max`	Верхняя граница накопленного сдвига.

Пример

Давайте сдвинем шапку не больше чем на восемьдесят пикселей:

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

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

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

	return (
		<View style={{ flex: 1 }}>
			<Animated.View
				style={{
					height: 56,
					backgroundColor: '#224466',
					transform: [{
						translateY: headerShift.interpolate({
							inputRange: [0, 80],
							outputRange: [0, -56],
							extrapolate: 'clamp',
						}),
					}],
				}}
			>
				<Text style={{ color: '#fff' }}>abcde</Text>
			</Animated.View>
			<Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>
				<View style={{ height: 600 }}>
					<Text>12345</Text>
				</View>
			</Animated.ScrollView>
		</View>
	);
}

На экране шапка уезжает вверх при прокрутке, но не дальше высоты блока.

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

метод event,
который пишет прокрутку в Value
метод interpolate,
который переводит число в смещение шапки
компонент Animated.ScrollView,
который отдает события прокрутки
компонент View,
который держит шапку и список