react-native - 使用 React Native Gesture Handler 和 Reanimated 检测滑动方向

Question

我们已经使用 React Native PanResponder 开发了一个滑动器，(在有人发表评论之前)——我们不能在这里使用任何其他滑动器库。在我们开发的滑动器中，我们面临一个问题，当用户结束滑动(意味着释放 Pan)时，启动 Spring 动画会出现延迟。

因此，为了解决这个问题，我们正在尝试从 React Native Animated API 移动至 Reanimated Libary这可以解决用户面临的延迟问题。

But while developing with React Native Gesture Handler (PanGestureHandler) and Reanimated Library, we're unable to detect swipe direction in the gesture handler.

我正在添加我们用来在 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 中检测平移时的方向非常容易。

Here comes the problem with Gesture Handler,

I'm unable to detect swipe while the gesture state is active

我已经在 Gesture Handler 中搜索了问题，我找到了 this .

问题中提出了两个解决方法

1. 第一个来自 Sonaye它有两个处理程序并检测在两个处理程序的 onHandlerStateChange 中滑动方向这在使用 reanimated 时没有帮助，因为它只设置滑动方向当处理程序状态发生变化时。
2. 第二个来自 Satya它实际上检测到滑动时状态是 ACTIVE 但他使用 translationX 属性，translationX 属性也可以对我们不利，可以搬进来类似于滑动器的任一方向。

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

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

注意:我们不能使用 FlingGestureHandler 和 Swipeables 因为我们仍然需要在 Fling 中找到方向 onHandlerStateChange 并且 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>
);