小编Ash*_*lal的帖子

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

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

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

但是,在使用React Native Gesture Handler (PanGestureHandler) 和 Reanimated Library 进行开发时,我们无法检测手势处理程序中的滑动方向。

我添加了用于检测 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
}
Run Code Online (Sandbox Code Playgroud)

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

手势处理程序的问题来了,

当手势状态处于活动状态时,我无法检测到滑动

我已经在手势处理程序中搜索了问题,并发现了这个

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

  1. 第一个是由Sonaye开发的,它有两个处理程序,并在onHandlerStateChange中检测两个处理程序的滑动方向,这在使用 reanimated 时没有帮助,因为它仅在处理程序状态更改时设置滑动方向。
  2. 第二个是Satya提出的,它实际上在 State …

react-native react-native-reanimated react-native-gesture-handler

4
推荐指数
1
解决办法
1万
查看次数