0

我正在使用 panResponder，我正在创建一个跟随用户手指的简单视图。我查了一下，发现这个例子有效并且我正在使用它，但我无法理解它。

constructor(props){
this.state = {
  pan: new Animated.ValueXY()
}
this._val = { x: 0, y: 0 };
this.state.pan.addListener(value => (this._val = value));
// Initialize PanResponder with move handling
this.panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (e, gesture) => true,
  onPanResponderMove: Animated.event([
    null,
    { dx: this.state.pan.x, dy: this.state.pan.y },
  ]),
  onPanResponderGrant: (e, gesture) => {
    // can't understand this part
    this.state.pan.setOffset({
      x: this._val.x,
      y: this._val.y,
    });
    this.state.pan.setValue({ x: 0, y: 0 });
 }
}

因此，据我所知，当用户移动手指时，会使用 Animated.event 调用 onPanResponderMove，其中将 this.state.pan.x 和 this.state.pan.y 设置为手势的 delta x 和 y ，这意味着如果用户将手指移动到底部 50 度和向右移动 50 度，this.state.pan 将类似于 {x:50,y:50}。

现在我为什么要设置 onPanResponderGrant 的偏移量？从我看到的偏移量将是 50（以前的值 + 50 取自 this._val.x 的 dx，当 ANimated.event 在 onPanResponderMove 上设置值时，该 _val.x 已经设置）所以视图应该移动 100？然后我们清除 this.state.pan 的值？

有人可以更好地解释我发生了什么吗？也许有一些简单的数字或一步一步的例子？希望你能帮助我，整整一天都在试图弄清楚。谢谢！

4

1 回答 1

2

OnPanResponderGrant当您开始移动连接的元素时首先触发。使用setOffset您在偏移量中“保存”以前的值 ( this._val.x)，它充当内存，或者您从原始位置移动了多少。

然后您使用setValue将当前（偏移）位置设置为新起点。

这样，您可以将已移动的数量完全保存在偏移量和value清理中，以便仅处理当前的滑动量（从最近的按下到释放）。

我希望这能澄清一点，我也有很多问题。

于 2018-10-11T12:44:05.590 回答