Класс ValueXY

Класс ValueXY в коде пишут как Animated.ValueXY. Конструктор принимает объект { x, y }. Метод getLayout отдает left и top для стиля. Метод getTranslateTransform собирает массив для transform.

Синтаксис

import { Animated } from 'react-native';

const pan = new Animated.ValueXY({ x: 0, y: 0 });

Методы

Метод	Описание
`setValue`	Ставит обе координаты сразу, без анимации.
`getLayout`	Возвращает объект `{ left, top }` для позиции.
`getTranslateTransform`	Возвращает массив сдвига для `transform`.

Пример

Давайте сдвинем блок через getTranslateTransform:

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

export default function App() {
	const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;

	return (
		<View>
			<Pressable onPress={() => pan.setValue({ x: 40, y: 20 })}>
				<Text>abcde</Text>
			</Pressable>
			<Animated.View style={{ transform: pan.getTranslateTransform() }}>
				<View style={{ width: 50, height: 50, backgroundColor: '#339966' }} />
			</Animated.View>
		</View>
	);
}

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

Пример

Давайте поставим блок через getLayout:

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

export default function App() {
	const pos = useRef(new Animated.ValueXY({ x: 10, y: 10 })).current;

	return (
		<View style={{ flex: 1 }}>
			<Pressable onPress={() => pos.setValue({ x: 80, y: 60 })}>
				<Text>12345</Text>
			</Pressable>
			<Animated.View
				style={[
					{ width: 44, height: 44, backgroundColor: '#663399', position: 'absolute' },
					pos.getLayout(),
				]}
			/>
		</View>
	);
}

На экране квадрат меняет абсолютную позицию по left и top.

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

класс Value,
который хранит одну координату
класс PanResponder,
который двигает ValueXY жестом
метод spring,
который возвращает точку после жеста
компонент Animated.View,
который принимает transform и layout