React-Native：使用 panResponder.panHandlers (nativeElement) 获取可拖动 Object 的 X 和 Y 坐标

Question

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

https://www.npmjs.com/package/react-native-draggable
在创建我的绘图视图时它工作正常，但在编辑该绘图时，我想将 Circle 和 Square 从其之前保存的 position 移动到其新的 position，但是当我试图将我之前的最后一个 position 设置为数据库，我无法获得 X 和 Y 的完美 position。

当我调试时，我正在触摸 object 的 position，而不是 object 的 X 和 Y position

这是我的代码：

1. 我使用 draggable class 创建了一个 object Draggable ，

2. 在我的组件中：

    <Draggable renderSize={68} renderColor='rad' x={80.80097961425781} y={72.79156494140625} renderText='B' pressDrag={()=>alert('touched.;')} pressDragRelease={({ nativeEvent }) => { console.log(nativeEvent);}} reverse={false} />

这是我的问题：
1. 如何从nativeElement获取 X 和 Y，
'nativeElement` 属性是： nativeEvent

ChangedTouches - Array of all touch events that have changed since the last event
identifier - The ID of the touch
locationX - The X position of the touch, relative to the element
locationY - The Y position of the touch, relative to the element
pageX - The X position of the touch, relative to the root element
pageY - The Y position of the touch, relative to the root element
target - The node id of the element receiving the touch event
timestamp - A time identifier for the touch, useful for velocity calculation
touches - Array of all current touches on the screen

Answer 1

我也在一个项目中使用了react-native-draggable 。 pageX 、 pageY是您实际触摸的坐标，而locationX 、 locationY是您的触摸距对象左上角的偏移量。 您没有指定如何渲染形状，但是例如，如果您要渲染要拖动的图像，则可以通过获取 ( pageX-locationX ), ( 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 / onDragRelease 。 希望有帮助。

Answer 2

您可以在回调的下一个 arguments 中获取 Draggable 的边界。

<Draggable
  ...
  onDragRelease={(e, gestureState, bounds) => { console.log(bounds); }}
/>