animation - 将 PanResponder 与 Animated.event 结合使用

Question

我一直在尝试让 PanResponder 按我需要的方式工作。我有一个包含圆圈的 View ，当我在该 View 上移动手指时，我希望圆圈跟随我。

结构

<View {...this.panResponder.panHandlers}>
   <Animated.Circle />
</View>

现在，所有教程都显示以下内容

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

这工作得很好，我的问题是我需要在 onPanResponderMove 中添加更多逻辑，并且每次我尝试在函数中使用 Animated.event 时它什么也不做。下面是该函数的示例:

onPanResponderMove: (e, gestureState) => {
  /* some other logic that I need here */

  const { dx, dy } = gestureState;
  Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}]);
},

我怎样才能做到这一点？

提前致谢

Answer 1

https://github.com/facebook/react-native/issues/15880

Reason was because Animation.event() only generates the function which is used from onPanResponderMove, it also needs the default arguments evt, gestureState

以下作品:

onPanResponderMove: (evt, gestureState) => {
  // do whatever you need here
  // be sure to return the Animated.event as it returns a function
  return Animated.event([null, {
    dx: this.state.pan.x,
    dy: this.state.pan.y,
  }])(evt, gestureState)
},