问题标签 [react-native-gesture-handler]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
919 浏览

javascript - 快速刷新后React Native Reanimated不改变值

我正在使用react-native-reanimatedreact-native-gesture-handler库开发动画。当我打开页面时,它按预期工作。但是当我使用快速挂钩或hook在函数中更改任何数据时。的值posX正在被重置。即使它出现在debug 'in the event, it does not update the data inAnimated.View` 中。

0 投票
1 回答
1969 浏览

javascript - 对组件外部的触摸事件做出本机反应

我正在创建一个可滑动视图组件的列表。我想实现,当一个可滑动的活动处于活动状态时,触摸除此可滑动视图之外的任何其他位置都会关闭滑动。有点像 textInput onblur。

我认为在这里添加一个监听器可能会有所帮助,但不完全确定如何实现它。

稍后我还有一个堆栈导航器,它将在列表顶部推送一个页面。我正在寻找的是相同的,一旦在视图之外,然后关闭滑动。

代码是这样的,要清楚。

使用自定义项目组件,例如:

0 投票
1 回答
232 浏览

reactjs - 为什么 React Native 中有两个独立的组件共享状态?

我正在尝试实现多点触控滑块功能(基于 React Native Gesture Handler 提供的示例代码)。

我发现当我创建两个TapOrPan组件时,它们单独工作正常,但同时触摸两个滑块时共享滑块状态。

鉴于我使用了两个单独的组件,为什么会发生这种情况?我错过了什么?

用于调试的博览会链接:https ://snack.expo.io/aPLAoFWar

0 投票
0 回答
160 浏览

react-native - 如何在用户滑动时从 PanGestureHandler 滑动移动获取当前 Y 值

当用户拖动具有特定滑动长度的容器时,我正在尝试执行触觉反馈。因此,使用以下代码,我试图在用户使用事件侦听器拖动容器时获取 translateY 的值:

我的代码没有触发onPan函数,我在这里做错了什么?如何正确获取此侦听器值?

0 投票
2 回答
3107 浏览

reactjs - 为什么我不能在 React Native 的 Animated.event() 中触发 nativeEvent 回调?

为什么拖动框时nativeEvent我的调用中没有触发回调?Animated.event

我的最终目标是实现逻辑以防止可拖动的手势控制组件离开屏幕,但我无法做到这一点,直到我弄清楚为什么所需的回调永远不会触发。

我为一个组件设置了一个onGestureEvent回调,并在其中传递了一个带有回调的调用(有关如何执行此操作的示例,请参见他们的文档)。<PanGestureHandler />Animated.event()nativeEvent

我知道 nativeEvent 回调没有触发,因为其中的 debug 和 console.log 调用Animated.block()没有向控制台输出任何内容(我正在使用 Expo- debug 链接运行它)。此外,调用中的set(_translateX, translationX)Animate.block()也永远不会执行,否则我希望看到框在拖动它们时移动(而不是在释放触摸时)。

请注意,如果您取消注释以下块,并{ nativeEvent: function... }直接删除它之后的对象,动画将按预期工作:

我觉得我错过了一些非常简单的东西,但我不知道它是什么。

这是用于调试的博览会链接:https ://snack.expo.io/d8xCeHhtj

这是我的代码:

谢谢您的帮助。

0 投票
0 回答
301 浏览

react-native - React Native 以编程方式在元素上滑动手势

在这个由 William Candillon 从http://start-react-native.dev制作的精彩视频中,他展示了如何制作这个屏幕外菜单。代码可以在这里找到:https ://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/the-10-min/src/Menu

我的问题是,是否有可能创建一个可以以编程方式关闭个人资料屏幕的功能,而不是用户在个人资料卡上滑动。最好是随着动画结束,但计划 B 可能只是优雅地将动画状态返回到起点。可以伪造滑动的通用功能会很棒。

提前致谢!

0 投票
0 回答
1034 浏览

react-native - react-native -gesture-handler - 如何使用 onHandlerStateChange 和 onPress?

我最近一直在玩 React Native 上的动画,我遇到了react-native-reanimatedand react-native-gesture-handler。我正在尝试使用水平滚动视图构建进度条,当我单击按钮时,滚动视图会转到请求的位置并且进度条会填充一点。我想要实现的是使用BaseButton's 或RectButton'sonPressonHandlerStateChange处理滚动逻辑和动画登录。这是我建立的:

这也是进度条组件:

但是,当我单击“下一步”按钮时,会出现此错误: BaseButton 上的错误

我很难解决这个问题,所以我问这个,通过按下按钮来处理动画和 JS 逻辑的最佳/正确方法是什么?如果有人可以帮助我,我将不胜感激。

0 投票
0 回答
1004 浏览

react-native - 如何使用带有反应原生手势处理程序的嵌套 Touchables

我正在尝试更改我所有的 Touchables 以响应本机手势处理程序,但是当我有一些嵌套的 Touchables 时,它的工作方式就不一样了,这是一个例子:

当我使用 react native 中的 Touchable 时没有问题,但是当我将它们更改为 react native 手势处理程序中的 Touchable 时,当我单击嵌套的手势处理程序时,两者都会被调用,我错过了什么?

编辑:

这个问题似乎只发生在 Android 中。

0 投票
0 回答
674 浏览

react-native - 复活/点击手势处理程序调用不更新状态

我使用 Tap Gesture Handler 和 Reanimated 创建了一个高亮组件,一切都很好,但是当我们需要类或组件的当前状态时它不起作用,它每次都需要初始状态

这是组件

高亮.tsx

我阅读了 useCode 文档并将 onPress、OnPressIn、OnPressOut 作为依赖项添加到 useCode 挂钩,

如果我们在 onPress 函数中设置状态,它将产生无限循环......

0 投票
1 回答
529 浏览

javascript - 如何在缩放范围为 0 - 1 用于缩小但 1 - n 用于放大的捏合手势处理程序中提高“缩小”速度?

我正在开发一个移动应用程序,但缩放功能有问题。我正在使用 React Native PinchGestureHandler。它提供了一个scale参数,定义为:

相对于屏幕坐标中两次触摸点的比例因子

这意味着:两个手指越远,比例因子越大。现在让我们假设我有一个使用这个scale因子放大的对象。让我们还假设用户想要放大很远并且停止缩放比例因子为5. 现在我将比例范围存储在一个状态中(在这种情况下prevScaleRange = 4,因为5 - 1lastScaleFactor - inititalScaleFactor),以便对于下一个捏事件,它不是从比例开始,而是从使用这个公式1的当前可见比例因子开始:5

但是,当再次缩小事件的比例因子时,从 开始1,这意味着比例因子的(理论)范围是1(从10)。但在“放大”的情况下,范围是4. 因此,当我现在使用上述公式进行缩小时,用户至少需要四个捏合事件才能达到prevScaleRange = 0.

不知何故,我无法找到一个公式来调整缩放因子以使缩小事件与放大事件具有相同的速度。有人可以帮忙吗?