React Native 如何为数组内的每个Draggable元素单独设置坐标

核心思路是将整个可拖拽元素的数据源存入响应式状态，每个元素独立维护自身的坐标属性，更新时仅修改当前拖拽的对应元素数据即可，具体修改步骤如下：

步骤1：调整状态定义 #

删掉全局共用的positionX、positionY状态，直接把整个列表数据存入useState，可以给每个元素加唯一标识，也可以直接用数组下标定位元素：

import { useState } from 'react';

// 初始数据，不需要依赖全局的positionX/positionY
const initialData = [
    {
      id: 1, // 可选唯一标识，也可以省略直接用数组下标定位
      name: " ",
      X: 680,
      Y: 80,
      newposX: 680, // 初始值和初始X坐标保持一致
      newposY: 80, // 初始值和初始Y坐标保持一致
    },
    {
      id: 2,
      name: " ",
      X: 550 ,
      Y: 80,
      newposX: 550,
      newposY: 80,
    },
    {
      id: 3,
      name: " ",
      X: 550 ,
      Y: 80,
      newposX: 550,
      newposY: 80,
    },
];

// 组件内定义列表状态
const [dragList, setDragList] = useState(initialData);

步骤2：修改渲染和拖拽回调逻辑 #

遍历列表时拿到当前元素的下标，拖拽释放时仅更新对应下标的元素坐标：

{dragList.map((item, index) => (
 <Draggable
    key={item.id || index} // React列表渲染必填key
    x={item.newposX} // 绑定当前元素独立的坐标，拖拽后位置会同步更新
    y={item.newposY}
    renderColor="blue"
    renderSize={50}
    isCircle
    textcolor="#000000"
    renderText={item.name}
    onDragRelease={e => {
      const releaseX = e.nativeEvent.pageX;
      const releaseY = e.nativeEvent.pageY;
      // 仅修改当前拖拽元素的坐标
      setDragList(prevList => {
        const updatedList = [...prevList];
        updatedList[index] = {
          ...updatedList[index],
          newposX: releaseX,
          newposY: releaseY
          // 如果需要同步更新原始X/Y字段，可在这里添加赋值逻辑
          // X: releaseX,
          // Y: releaseY
        };
        return updatedList;
      });
    }}
    />
  ))}

可选优化 #

如果不需要保留初始的X/Y字段，可以直接删除冗余字段，仅用newposX/newposY维护坐标即可；如果需要拖拽过程中实时更新坐标，把onDragRelease替换为Draggable组件对应的实时拖拽回调即可，更新逻辑完全一致。

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