问题标签 [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 回答
262 浏览

react-native - 嵌套的 TapGesture 处理程序 React Native

我一直在尝试在我的 React Native 项目中使用 Tap Gesture Handler,但我在嵌套手势方面遇到了一些问题。我有一个父母 TapGestureHandler(我们称之为 A)和一个孩子 TapGestureHandler(我们称之为 B)。当我单击 B 时,A 也将被执行。请帮我解决这个问题。

这是我的 TapGestureHandler A 代码:

这是我的 TapGestureHandler B 代码:

0 投票
1 回答
468 浏览

react-native - 当孩子用 Swipeable 包裹时,FlatList 或 ScrollView 不起作用

我有一个 FlatList,FlatList 中的每个项目都用 react-native-gesture-handler/Swipeable 中的 Swipeable 包装。似乎 Swipeable 取消了手势,并且如果我的手指在 Swipeable 元素上,则不允许 FlatList 滚动。有什么办法吗?到目前为止,我还无法让它们一起正常工作。

编辑

感谢您的回答,原来问题在于整个视图被包装在 DismissableKeyboard 组件中。我删除了它,现在一切正常。

0 投票
1 回答
224 浏览

react-native - React 原生动画不是动画的

所以目前正在试验 RN 动画,我试图尽可能慢地了解基本功能和工作流程。我创建了一个新的 Expo 应用程序并通过命令安装了react-native-reanimated包版本~1.13.0react-native-gesture-handler版本。~1.7.0expo install

稍后我也计划使用该react-native-redash软件包,但现在我正在尝试配置为什么下面的代码根本不起作用。

之后我的“球”视图没有动画。任何人都知道我在这里做错了什么?

0 投票
1 回答
777 浏览

react-native - 在带有 wix/react-native-navigation 的模态中使用 react-native-gesture-handler (RNGH)

我正在尝试使用 RNGH 组件,例如TouchableOpacityreact-native-modal结合wix/react-native-navigation. 它不起作用。当我点击它时,没有发生任何交互。

导入似乎正在工作TouchableOpacityreact-native问题是,我想使用import {TouchableOpacity} from 'react-native-navigation';它是因为它比原来的响应更快。

谁能解释为什么,或者解决方法?

这是我的应用程序结构:

0 投票
0 回答
270 浏览

react-native-reanimated - 如何撤消 react-native-gesture-handler

我正在使用 react-native-reanimated v 1.9 和 react-native-gesture-handler 在屏幕上拖动一个元素,我需要能够在用户按下“UNDO”按钮后将元素重置到以前的位置.

初始化一些动画值后:

.... this.handlePan函数从这里获取平移事件:

从 this.handlePan 事件映射到xy,然后我可以使用 react-native-reanimated call()方法在任何平移运动结束时提取一些动画值,并使其可用于函数recordNewState()

函数recordNewState()基本上构建了一个动画值数组,可用于undo()函数:

在这里,我检查最新的动画值 (undoAction.action),在 switch 语句中,如果它是 XY,我翻译项目减去最新的动画值。和

该项目不会移回先前的位置,并且 call() 方法再次被调用,将另一个动画值添加到数组中。

0 投票
1 回答
748 浏览

javascript - 达到限制后停止拖动

我正在使用本机手势处理程序来创建一个可以上下滚动的栏。目前我可以随心所欲地滚动它。我想修改它,使其在达到一定限制时停止滚动。

onHandleStateChange中,我可以获得event.nativeEvent诸如

我想在代码中使用 if else 条件,以便我可以设置滚动停止点之后的限制。但我不知道该怎么做,因为滚动是从onGestureEvent.

我想在这里添加检查,但如果我像这样更改它,它不再起作用:

小吃博览会:https ://snack.expo.io/@nhammad/insane-pizza 我试图复制它,但在这里我无法滚动它。我在我的应用程序中使用相同的代码,它会滚动到那里。

0 投票
0 回答
279 浏览

react-native - react-native-gesture-handler 无法安装并显示编译错误

我最初尝试将 react-native-elements 用于图标和其他组件。我按照文档进行设置,但图标在矩形中显示为十字形。在此期间,我通过运行“react-native link react-native-vector-icons”链接了矢量图标,并且还在项目的 android 文件夹的 setting.gradle 中添加了以下内容:

android/native_modules.gradle"); applyNativeModulesSettingsGradle(设置)

mainApplication.java 文件也需要更改,因此我将其更改为以下内容:

我还添加了

构建.gradle 文件。

在我通过第一个“react-native start”和“react-native run-android”重新启动应用程序后,我在我的 android 模拟器中遇到了“null 不是对象(评估 'RNGestureHandlerModule.default.Direction')”,之后我尝试在线搜索解决方案,有些说卸载并重新安装 react-native-gesture-handlers 会解决它,所以我尝试卸载并重新安装手势处理程序并尝试重新启动流星服务器并运行“react-native run-android”。但相反,我遇到了一个错误说:

此外,当我尝试卸载手势处理程序时,Visual Studio 崩溃了,我不得不再次打开,在我启动 Vscode 后我重新安装了手势处理程序,它显示以下错误:

目前我的 package.json 文件如下:

我需要尽早解决这个问题,因为我需要向我的前辈展示我的工作。我也是 react-native 环境的新手,因此,我担心的是:

  1. 如何为 android 设置和使用 react-native 矢量图标(以及第三方库)?
  2. 这是什么问题,RNGestureHandler?
  3. 它说 Package react-native-gesture-handler 已被忽略,因为它包含无效原因:找不到模块'react-native-gesture-handler\package.json'。这是什么,是什么原因造成的,我该如何解决?
0 投票
1 回答
1499 浏览

react-native-reanimated - 如何在 panGestureHandler 中制作滚动视图 scrolllabe?

我正在使用带有and的react-native-gesture-handler库。我想让 scrollView 可滚动,它嵌套在 panGestureHandler 内,但所有交互都由 处理,所以 scrollView 不起作用。这是我的代码。reanimatedreact-native-redashpanGestureHandler

VideoModal.js文件

}

scrollViewVideoContent 里面

导出默认函数 VideoContent(props) {

}

无论如何我可以告诉 pangesture 只有当手指放在屏幕的顶部时才能工作,否则它不应该工作,我可以滚动滚动视图中存在的内容?

0 投票
1 回答
656 浏览

react-native - react-native-gesture-handle 功能组件无法访问的可滑动方法

React-Native-Gesture-Handler文档显示了在 JS 类中实现的 Swipeable 方法,并且只能通过“this”关键字访问,例如this.close

来自文档的示例:

如何在 React 功能组件中使用“this”关键字(或其替代关键字)来访问这些方法?

0 投票
0 回答
614 浏览

react-native - React Navigation and React Native Gesture Handler -- Invariant Violation: No callback

I have been experimenting mono repositories with javascript, using react and react-native applications. However, I have been having some problems using external dependencies on a simple react-native application.

While trying to integrate react-navigation following this guide here, I always end up with a lot of errors like: ERROR Invariant Violation: No callback found with cbID 18929 and callID 9464 for module . Args: '[1131]'

It even gets in loop. This starts happening when I import react-native-gesture-handler at index.js. I have been trying to understand the problem for days and tried a lot of different stuffs, since nohoist of dependencies, clearing dependencies, reset react-native caches, watchman links and so on. However, I always end up in this error.

I have been experimenting with it on ios.

I am not sure it is a problem with the libraries I have mentioned here, because if I have a standalone react-native project, I can use the react-native-gesture-handler.

So, initially, I thought it was a problem with the mono repository structure I have, however, I have tried to use other libraries like: styled-components, react-native-router, react-native-restart, and react-native-contacts, and those libraries work well.

Has anyone passed for this problem? I have a github repository here where I try to explain how to reproduce the error.

I have also been documenting, to my self, my experimentations with mono repositories here, step by step, in case it gives more context.

I do not know if it is the best place to make this question, however I do not know where to look more, any suggestion is welcomed.

Thanks!