我正在学习动画和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的值.为此,您需要跟踪该值.
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,然后再跳回你的位置.手指是.它还确保您拥有当前位置……无论如何您可能需要它.
