Question

我正在学习动画和panresponder apis in native 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()？

Answer 1

0,0中的逻辑正在使其如果在释放时拖动区不在dropzone中，则会重置为this.state.pan（these are the lines causing it）。

单独删除该逻辑并不是你应该做的全部。您应该设置偏移并重置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);：

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

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

{{1}}

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

Answer 2

另一种方法是跟踪当前偏移并继续将其添加到平移。所以在构造函数currentPanValue : {x: 0, y: 0},

中声明这一点

并将onPanResponderRelease编辑为以下内容：

onPanResponderRelease           : (e, gesture) => {
                this.state.currentPanValue.x += this.state.pan.x._value;
                this.state.currentPanValue.y += this.state.pan.y._value;

                this.state.pan.setOffset({x: this.state.currentPanValue.x, y: this.state.currentPanValue.y});
                this.state.pan.setValue({x: 0, y: 0});
            }

如果您想要最终坐标，请使用this.state.currentPanValue

Answer 3

实际上你唯一需要改变的是onPanResponderRelease函数。您当前正在做的是将手势移动的增量应用到组件的初始位置。你想要做的是将它应用到最后一个手势结束时的位置。所以你需要保存偏移量。 AnimatedValueXY.setOffset救援！

onPanResponderRelease : (e, gesture) => {
    if(this.isDropZone(gesture)){
        this.setState({
            showDraggable : false
        });
    }else{
        this.state.pan.setOffset({
            x: this.state.pan.x._offset + e.dx,
            y: this.state.pan.y._offset + e.dy,
        })
        this.state.pan.setValue({x: 0, y: 0})
}

我在这里使用内部_offset变量，因为我可以找到通过API访问它的方法。您可以偏离当然也只是手动跟踪偏移。我还没有测试过这段代码，但是你明白了。

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

3 个答案: