Question

我正在使用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设置为增量x和y表示手势，这意味着如果用户将其手指50移至底部，将手指移至50，则this.state.pan将类似于{x：50，y：50}。

现在我为什么要为onPanResponderGrant设置一个偏移量？从我看到的偏移量将为50（先前的值+从ANimated.event在onPanResponderMove上设置了侦听器的this._val.x获取的dx），因此视图应移动100？然后我们清除this.state.pan值？

有人可以更好地向我解释发生了什么吗？也许有一些简单的数字或分步示例？希望您能为我提供帮助，整整一天的时间都在努力找出答案。谢谢！

Answer 1

OnPanResponderGrant首先在您开始移动连接的元素时触发。使用setOffset可以以偏移量“保存”先前的值（this._val.x），该值可以用作存储器，也可以保存您从原始位置移走了多少。

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

通过这种方式，您已将已移动的金额完全保存为偏移量，并且value干净以便仅处理当前的刷卡金额（从最新按下到释放）。

我希望这一点可以解决，我也有很多问题。

动画事件响应本机

1 个答案: