如何使draggable记住它在React Native中的位置

Question

我正在学习动画和panresponder apis in react native.使用React Native和源代码进行动画拖放

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

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

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

我需要在源代码中进行哪些更改,以便在注释onPanResponderRelease逻辑时圆圈正确地拖动屏幕？

getTranslateTransform()？

Answer 1

其中的逻辑onPanResponderRelease是,如果在释放时拖动区不在dropzone中,则重置为0,0(这些是导致它的行).

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

在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,然后再跳回你的位置.手指是.它还确保您拥有当前位置......无论如何您可能需要它.