React-Native：使用panResponder.panHandlers（nativeElement）获取可拖动对象的X和Y坐标

Question

我正在开发一个应用程序，该应用程序提供了正方形和圆形等不同形状的设计，我使用了以下库

https://www.npmjs.com/package/react-native-draggable
在创建我的工程图视图时，它可以正常工作，但是在编辑该工程图时，我想将“圆形”和“正方形”从其先前保存的位置移动到新位置，但是当我尝试从DB，我无法获得X和Y的完美位置。

调试时，我得到的是对象的触摸位置，而不是对象的X和Y位置

这是我的代码：

1. 我使用了可拖动类来创建对象Draggable，

2. 在我的组件中：

   // Expected Output
   [
      {
         "id": "trans",
         "in": "credit",
         "out": "bank",
         "value": 20
       },
       {
         "id": "fund",
         "in": "bank",
         "out": "bank",
         "value": 10
       }
   ]
   
   // get the values if 'in' is 'debit' and 'out' is 'bank' and id is "fund" 
   
   [{
         "id": "trans",
         "in": "bank",
         "out": "bank",
         "value": 10
       },{
         "id": "fund",
         "in": "debit",
         "out": "bank",
         "value": 10
       }]
   
   // get the values if 'in' is 'bank' and 'out' is bank and id is "trans"
   
     [{
         "id": "trans",
         "in": "bank",
         "out": "bank",
         "value": 10
       },{
         "id": "fund",
         "in": "bank",
         "out": "bank",
         "value": 10
       }]
   
   

这是我的问题：
1.如何从 <Draggable renderSize={68} renderColor='rad' x={80.80097961425781} y={72.79156494140625} renderText='B' pressDrag={()=>alert('touched!!')} pressDragRelease={({ nativeEvent }) => { console.log(nativeEvent);}} reverse={false} /> 获得X和Y，
'nativeElement`属性为： nativeEvent

nativeElement

Answer 1

我也在项目中使用了react-native-draggable。 pageX，pageY是您实际触摸的坐标，而locationX，locationY是您的触摸相对于对象左上角的偏移量。您没有指定如何渲染形状，但是例如，如果要渲染要拖动的图像，则可以通过获取（{pageX-locationX），（{{1} }）。您可以像这样将它们从pageY-locationY中拉出：

nativeEvent

此外，我将<Draggable renderSize={68} renderColor='rad' x={80.80097961425781} y={72.79156494140625} renderText='B' onDragRelease={(e) => {console.log("pageX, pageY = " + e.nativeEvent.pageX + ", " + e.nativeEvent.pageY); console.log("locX, locY = " + e.nativeEvent.locationX + ", " + e.nativeEvent.locationY)}}> reverse={false} /> 更改为pressDragRelease；不知道您是否将onDragRelease包裹在自己的单独函数中，或者是否使用了其他版本或其他东西，但是在我看来，它是onDragRelease / onDrag。希望有帮助。