react-native – 如何使draggable记住它在React Native中的位置

我正在学习动画和panresponder apis in react native.继 Animated Drag and Drop with React Native和 source之后

我想扩展示例,以便您可以拖动圆圈而无需重置它.目前,代码将圆圈设置回屏幕中心,并依赖于panresponders dX / dY值.

我最好的猜测是我必须在onPanResponderMove中改变一些东西

onPanResponderMove: Animated.event([null,{
    dx: this.state.pan.x,dy: this.state.pan.y,}]),

我需要在源代码中进行哪些更改,因此如果我注释掉onPanResponderRelease逻辑,则圆圈会在屏幕上正确拖动？

getTranslateTransform()？

onPanResponderRelease中的逻辑使得如果在释放时拖动区不在dropzone中,它将重置回0,0( these are the lines causing it).

尽管如此,删除该逻辑并不是你应该做的.您应该设置偏移量并在onPanResponderRelease中重置this.state.pan的值.为此,您需要跟踪该值.

在componentDidMount中,添加以下内容：

this.currentPanValue = {x: 0,y: 0};
this.panListener = this.state.pan.addListener((value) => this.currentPanValue = value);

然后,在componentWillUnmount中：

this.state.pan.removeListener(this.panListener);

现在您已拥有当前值,只需将其添加到PanResponder：

onPanResponderRelease: (e,gestureState) => {
  this.state.pan.setOffset({x: this.currentPanValue.x,y: this.currentPanValue.y});
  this.state.pan.setValue({x: 0,y: 0});
},

它似乎比实际上更复杂.基本上你只是设置从0/0的偏移量,然后将值设置为0/0,这样当你在之前释放它之后再次开始移动它时,它不会跳回到0/0,然后再跳回你的位置.手指是.它还确保您拥有当前位置……无论如何您可能需要它.