React Native/Expo如何监听元素位置变化并获取其坐标？

在现代React Native/Expo环境中，推荐以下几种可靠方案来监听元素移动并获取实时坐标：

1. 监听元素布局变化（onLayout） #

onLayout是React Native内置属性，会在元素首次渲染或布局发生变化时触发回调，返回元素的位置和尺寸信息，适合监听因布局调整（如父容器变化、动态样式修改）导致的位置变动。

代码示例：

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

export default function PositionTracker() {
  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });

  const handleLayout = (event) => {
    const { x, y, width, height } = event.nativeEvent.layout;
    setLayout({ x, y, width, height });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View
        style={{ width: 100, height: 100, backgroundColor: 'blue' }}
        onLayout={handleLayout}
      />
      <Text>当前坐标：x={layout.x}, y={layout.y}</Text>
    </View>
  );
}

2. 监听动画驱动的元素移动（Reanimated v2+） #

如果元素通过react-native-reanimated驱动移动，可直接监听动画值变化，结合初始布局信息计算实时坐标。Expo默认支持Reanimated，无需额外配置。

代码示例：

import { View, Text } from 'react-native';
import { useSharedValue, useAnimatedStyle, useAnimatedReaction, withRepeat, withTiming } from 'react-native-reanimated';
import { useEffect, useState } from 'react';

export default function AnimatedPositionTracker() {
  const [initialLayout, setInitialLayout] = useState({ x: 0, y: 0 });
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  // 监听动画值变化，计算实时坐标
  useAnimatedReaction(
    () => ({ x: translateX.value, y: translateY.value }),
    (newValues) => {
      const currentX = initialLayout.x + newValues.x;
      const currentY = initialLayout.y + newValues.y;
      console.log('实时动画坐标：', currentX, currentY);
    }
  );

  // 获取初始布局
  const handleLayout = (event) => {
    const { x, y } = event.nativeEvent.layout;
    setInitialLayout({ x, y });
  };

  // 启动循环动画
  useEffect(() => {
    translateX.value = withRepeat(withTiming(100, { duration: 2000 }), -1, true);
    translateY.value = withRepeat(withTiming(50, { duration: 1500 }), -1, true);
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View
        style={{ width: 100, height: 100, backgroundColor: 'green' }}
        onLayout={handleLayout}
        animatedStyle={animatedStyle}
      />
    </View>
  );
}

3. 监听用户拖动手势（Expo Gesture Handler） #

若需监听用户手动拖动元素的操作，使用expo-gesture-handler的PanGestureHandler可实时获取拖动位移，结合初始位置得到当前坐标。

代码示例：

import { View, Text, StyleSheet } from 'react-native';
import { PanGestureHandler, GestureHandlerRootView } from 'expo-gesture-handler';
import { useSharedValue, useAnimatedStyle, runOnJS } from 'react-native-reanimated';
import { useState } from 'react';

export default function DragPositionTracker() {
  const [initialLayout, setInitialLayout] = useState({ x: 0, y: 0 });
  const [currentPosition, setCurrentPosition] = useState({ x: 0, y: 0 });
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const handleLayout = (event) => {
    const { x, y } = event.nativeEvent.layout;
    setInitialLayout({ x, y });
    setCurrentPosition({ x, y });
  };

  const onGestureEvent = ({ nativeEvent }) => {
    translateX.value = nativeEvent.translationX;
    translateY.value = nativeEvent.translationY;
    // 计算实时坐标并同步到React状态
    runOnJS(setCurrentPosition)({
      x: initialLayout.x + nativeEvent.translationX,
      y: initialLayout.y + nativeEvent.translationY,
    });
  };

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));

  return (
    <GestureHandlerRootView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <View
          style={styles.box}
          onLayout={handleLayout}
          animatedStyle={animatedStyle}
        />
      </PanGestureHandler>
      <Text>拖动实时坐标：x={currentPosition.x.toFixed(0)}, y={currentPosition.y.toFixed(0)}</Text>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

内容的提问来源于stack exchange，提问作者Marius