问题标签 [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.
javascript - react-native-gesture-handler:当 TapGestureHandler 改变组件顺序时,PanGestureHandler 不调用事件
我有一个组件需要执行如下操作:当用户点击或拖动它时,我需要它转到其他元素的顶部。为此,我使用 PanGestureHandler 和 TapGestureHandler 将内容包装在一起,如下所示:
问题是:在点击处理程序中,当我重新排列组件数组以将此组件放在所有其他组件之上时,PanGesture 不会调用处理程序,因此用户无法再拖动此组件。只有当他再次按下时,它才会起作用。
但是,如果我在点击处理程序上做相反的事情(而不是将元素放在顶部,但低于其他元素)它工作得很好。
处理程序:
如何将组件放在它上面并能够保持拖动事件?
javascript - 如何使用 react-native-gesture-handler 匹配孩子的大小
我正在尝试使用 react-native-gesture-handler 创建一个可拖动、可扩展和可旋转的组件。这是我第一次尝试 react-native-gesture-handler,所以我不确定这是否是由于手势触发所需的命中框而导致的预期行为。
所以我嵌套了一些GestureHandlers
来实现所有三种行为,但我的最终<Animated.View>
占据了全屏宽度。我希望红色区域仅覆盖children
. 这是一个问题,因为旋转和缩放是基于红色区域的中心,所以锚点在错误的位置。
可拖动:
用法:
结果是:
javascript - onScrollBeginDrag Animated.event with useNativeDriver: true for native ui recycler view component not working
我们的 Android 代码库中有一个回收器视图,我们希望将其转换为原生 UI 组件并在 React Native 中使用它。
我正在对一些功能进行原型设计并遇到了这个问题。
我们必须基于onScrollBeginDrag事件来实现一个弹簧动画。我无法使其与useNativeDriver:true一起使用。如果我在 React 线程上收听事件并更新它的动画值,它会工作,但它偶尔会遇到故障。
这是不起作用的代码片段:
但是这个确切的代码适用于useNativeDriver: true
.
我也尝试过attachNativeEvent
,但这也不起作用:
我正在onScrollBeginDrag
我的 android 代码库上正确注册事件,并通过记录事件正在流动来验证这一点。这是我用来从 android recycler 视图推送事件的一段代码。
那里的 React Native 专家,你还有什么我应该做的来完成这项工作吗?
android - 滑动打开反应原生导航抽屉
我正在尝试设置一个反应本机导航抽屉,并且我有一个可以正确切换抽屉的按钮,尽管我正在尝试设置滑动功能以打开抽屉,但这根本不起作用。我的drawer.js文件如下
它像这样导入我的 App.js
我已经尝试过这篇文章中的建议,但没有成功。
我正在运行反应原生 0.63、反应原生导航 5.9、反应原生导航抽屉 5.12.3 和反应原生手势处理程序 1.10.0
供参考的是我的 index.js 文件,其中包含前面提到的帖子中的更新
react-native - 如何从 react-native-gesture-handler 禁用 RectButton
标题几乎是个问题。在 react-native 按钮上,即 touchableOpacity 你有 disabled 道具,但它似乎不适用于 RectButton
不工作
javascript - 获取从 FlatList 呈现的项目总数,然后根据项目状态更改更新该数字
我对 React Native 非常陌生(老实说,通常是 React/Javascript)并且我很困惑。我有一个家务跟踪应用程序,它使用 Flatlist 呈现家务列表,然后可以使用 React Native Gesture Handler Swipeable 滑动/检查。
我想在杂务列表上方有一个标签,显示已完成的杂务总数(占位符当前显示“??杂务完成”)。我知道这需要找到 1)我的多少 ChoreListItems 是从 Flatlist 组件呈现的,然后 2)这些项目中有多少具有“isComplete”状态。我有几个嵌套/可重复使用的组件,因为这个屏幕会有多个版本(洗衣房、厨房、浴室等),我知道这让我更加困惑。我觉得这里可能有一个明显的答案,但我什至不知道如何开始解包。
这是 ChoreListItem(从 Flatlist 渲染并可以滑动的内容):
这是 ChoreList(包括 Flatlist 组件):
这是包含所有道具的组件/屏幕:
react-native - 将 Reanimated.event 传递给 BaseButton onHandlerStateChange
我正在尝试<BaseButton>
在按下时为视图设置动画。我想使用Reanimated
v1 native Animated.event
。我做了以下事情:
但是我不断收到错误消息:
TypeError: _this.props.onHandlerStateChange 不是函数。(在'_this.props.onHandlerStateChange(e)'中,'_this.props.onHandlerStateChange'是AnimatedEvent的一个实例)
react-native-gesture-handler 文档明确指出我可以传入Animated.event
/Reanimated.event
而不是回调 - https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/common- gh#onhandlerstatechange
关于如何解决这个问题的任何想法?
react-native-gesture-handler - TapGestureHandler 的 onGestureEvent 永远不会触发吗?
这是以下问题的小吃 - https://snack.expo.io/@noitidart/tapgesturehandler-ongestureevent
onGestureEvent
forTapGestureHandler
永远不会触发吗?文档没有说明这一点。这似乎发生在我身上:
您将在点击时看到它永远不会触发(“手势事件”)
react-native - Swipe down modal only when at the top of FlatList
I am trying to clone TikTok comments modal (see gif below) where users should be able to scroll down to view more comments and once they scroll up and reach the top, they modal will be pulled down instead.
In my code, I enclosed the FlatList with PanGestureHandler. Currently, once the user reach the top of the comments and tried to swipe down, the modal does not move.
react-native - 反应本机手势处理程序- 移出组件时如何终止左/右滑动手势?
我有一个 FlatList,其中的元素包裹在 Swipeable 组件中。
当我对角滚动时,有时我会意外触发 onSwipeableLeftOpen 或 onSwipeableRightOpen,因为 FlatList 的滚动不会首先运行。
当我在 Swipeable 组件之外时,如何终止 Swipeable 的滑动?
重现:
转到https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo
选择选项“基于手势处理程序的 SwipeableRow”
按住任意列表项,向上或向下拖动几行并尝试向左或向右拖动。我的期望是当我在 Swipeable 组件之外时不会拖动列表项。