React Native PanResponder事件计算检测及修改后拖拽失效问题

你修改后的代码无法实现拖拽的核心原因是对Animated.event的调用逻辑存在错误：

• Animated.event属于工厂函数，调用后会返回一个接收event、gestureState参数的事件处理函数，它本身不会直接执行手势值和动画值的绑定逻辑。
• 官方示例中直接将Animated.event的返回值赋值给onPanResponderMove，手势触发时框架会自动调用这个返回的函数，完成dx/dy到pan.x/pan.y的同步更新。
• 你手动包裹了一层自定义回调后，仅创建了Animated.event返回的处理函数，但没有主动传入当前的event和gestureState调用它，因此pan的取值永远不会更新，方块自然无法跟随拖拽动作移动。

有两种常用的实现方式可以满足你的需求：

方式1：自定义回调内主动执行Animated.event返回的处理函数 #

onPanResponderMove: (event, gestureState) => {
  // 你的自定义逻辑
  console.log(event);
  console.log(gestureState);
  // 主动调用Animated.event生成的处理函数，传参完成值同步
  Animated.event([
    null,
    { dx: pan.x, dy: pan.y }
  ])(event, gestureState);
},

方式2（更推荐）：使用Animated.event内置的listener配置 #

不需要手动包裹回调，直接利用官方提供的配置项插入自定义逻辑，性能更优：

onPanResponderMove: Animated.event([
  null,
  { dx: pan.x, dy: pan.y }
], {
  listener: (event, gestureState) => {
    // 所有自定义的打印、计算逻辑都可以放在这里
    console.log(event);
    console.log(gestureState);
  },
  useNativeDriver: false
}),

内容的提问来源于stack exchange，提问作者James Lee