将 PanResponder 与 Animated.event 结合使用

Question

我一直在努力让 PanResponder 以我需要的方式工作。我有一个包含圆圈的视图，当我在该视图上移动手指时，我希望圆圈跟随我。

结构

<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

原因是因为 Animation.event() 只生成从 onPanResponderMove 使用的函数，它还需要默认参数 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)
},

Answer 2

解决方案如下

onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}], {
  listener: (event, gestureState) => {
    /* my own logic */
  },
}),