Question

我们已经使用React Native PanResponder开发了一个swiper，（在有人发表评论之前）-我们不能在这里使用任何其他的swiper库。在我们开发的滑动器中，当用户结束滑动（即释放Pan）时，我们面临一个问题，即在启动弹簧动画时会出现滞后。

为解决此问题，我们正在尝试从React Native Animated API移至Reanimated Libary，以解决用户面临的滞后问题。

但是在使用React Native Gesture Handler（PanGestureHandler）和已恢复动画库，我们无法检测到手势处理程序。

我要添加用于检测PanResponder中滑动方向的代码部分

onPanMoving = (evt, {dx}) => {
   this.draggedEnd = dx < -this.swipeThreshold; //You are moving towards right screen
   this.draggedStart = dx > this.swipeThreshold; //You are moving towards left screen
}

如您所见，在PanResponder中，平移锅移动时检测方向非常容易。

手势处理程序出现了问题，

在手势状态为活动状态时，我无法检测到滑动

我已经在Gesture Handler中搜索了问题，并且发现了this。

问题中建议了两种解决方法

第一个是Sonaye，它有两个处理程序并检测在两个处理程序的 onHandlerStateChange 中滑动方向这在使用复活时没有帮助，因为它仅设置滑动方向当处理程序状态更改时。
第二个是Satya，它实际上在该州处于活动状态，但他使用了 translationX 属性， translationX属性也可能对我们不利，并且可以搬入任一方向都类似于滑动。

两种解决方法都不能解决我们的问题。

还有其他方法可以使用PanGestureHandler和Reanimated找到方向。我尝试使用具有 dx 值的Reanimated的PanResponder，但最终出现错误消息，即仅当 dx 来自PanResponder的gestureState参数时才支持nativeEvent属性。

注意：我们不能使用 FlingGestureHandler 和 Swipeables ，因为我们需要在Fling上仍在HandlerStateChange上查找方向，而Swipeables不会使用Reanimated

Answer 1

您可以通过属性 velocityX

在水平滑动时检测方向

示例：

const handleGesture = (evt) => {
    const { nativeEvent } = evt;

    if (nativeEvent.velocityX > 0) {
      console.log('Swipe right');
    } else {
      console.log('Swipe left');
    }
  };

return (
   <PanGestureHandler onGestureEvent={handleGesture}>
       // child component
   </PanGestureHandler>
);

Answer 2

就我而言，我曾经检测过方向。对我有用。

使用React Native Gesture Handler检测滑动方向并恢复动画

2 个答案: