Метод getLayout

Метод getLayout у ValueXY синхронно возвращает { left, top }. Ключи совпадают с координатами x и y. Объект кладут в style при position: 'absolute'.

Синтаксис

const layout = pan.getLayout();

Пример

Давайте нарисуем блок в абсолютной позиции:

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

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

	return (
		<View style={{ flex: 1 }}>
			<Animated.View
				style={[
					{ width: 48, height: 48, backgroundColor: '#4488aa', position: 'absolute' },
					pos.getLayout(),
				]}
			/>
			<Text>12345</Text>
		</View>
	);
}

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

Пример

Давайте сдвинем маркер через setValue и getLayout:

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

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

	return (
		<View style={{ flex: 1 }}>
			<Pressable onPress={() => pos.setValue({ x: 120, y: 30 })}>
				<Text>abcde</Text>
			</Pressable>
			<Animated.View
				style={[
					{ width: 24, height: 24, backgroundColor: '#336699', position: 'absolute' },
					pos.getLayout(),
				]}
			/>
		</View>
	);
}

На экране маленький квадрат прыгает в новую absolute-позицию.

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

метод getTranslateTransform,
который дает сдвиг через transform
перечисление Position,
которое задает absolute и relative
компонент View,
где описаны ключи left и top
метод setValue,
который меняет координаты для getLayout