如何在react-native-draggable中正确获取并保存拖拽组件的x、y坐标

问题本质 #

你用moveX/moveY保存位置的方式有误，这两个值是拖拽过程中的累计偏移量，并非组件的最终绝对坐标，导致从Firebase加载后位置错乱。必须获取拖拽结束时组件的最终绝对位置来存储。

正确解决方案 #

方案1：通过手势状态计算最终位置 #

根据你打印的手势对象，拖拽结束后的最终坐标可通过初始位置+偏移量计算得出：

onDragRelease={(gesture) => {
  props.settouchedId(props.id)
  // 计算最终绝对位置
  const finalX = gesture.x0 + gesture.dx;
  const finalY = gesture.y0 + gesture.dy;
  
  props.setpositionX(finalX);
  props.setpositionY(finalY);
}}

方案2：通过组件Ref直接获取当前位置 #

给Draggable组件添加Ref，直接读取其内部状态中的当前位置，更精准：

import React, { useRef } from 'react';

const DraggableNote = (props) => {
  const draggableRef = useRef(null);

  return (
    <Draggable
      ref={draggableRef}
      onDragRelease={() => {
        props.settouchedId(props.id);
        if (draggableRef.current) {
          // 直接读取组件当前的x/y位置
          const { x, y } = draggableRef.current.state;
          props.setpositionX(x);
          props.setpositionY(y);
        }
      }}
      x={props.x}
      y={props.y}
    >
      {/* 子组件内容 */}
      <View style={styles.shadow}>
        <View style={{
          backgroundColor: props.color,
          width: 150,
          height: 50,
          borderWidth: 2,
          borderColor: 'black',
          borderRadius: 10,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <Text style={styles.text}>{props.text}</Text>
        </View>
      </View>
    </Draggable>
  );
};

const styles = {
  shadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
  },
};

关键说明 #

• moveX/moveY是拖拽过程中的相对偏移，不是组件的绝对位置，用它作为初始位置传入会导致叠加偏移，引发位置错乱。
• 确保从Firebase读取的x/y值为数字类型，避免字符串转数字的精度问题。
• 若仍有异常，检查react-native-draggable版本，部分旧版本存在位置计算bug，建议升级到最新稳定版。

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