问题标签 [react-native-reanimated-v2]

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 投票
1 回答
239 浏览

react-native - 如何使用 react native reanimated v2 为多个条目设置动画?

我是新手reanimated。我现在正在尝试恢复多个项目。

这些项目不会在加载组件开始时显示。但是当按下相应的项目时,他们的项目会显示我的意图。

eg when button 1 is pressed item 1 will pop up slowly, button 2 is pressed and item 2 像那样。

我的应用中有 2 个组件

ItemsList screenitem component

我在 itemList 屏幕中没有任何动画代码。我只是重新调整项目组件。

在项目组件内部sharedValue, useEffecthooks, and useState。我得到了一个用于根据用户交互进行动画处理的组件。

项目组件

正如你在代码中看到的,我的意图是当用户按下button 1隐藏的细节时button 1会显示出来。

但事情只是第一次起作用。我认为是因为shared value. 我想要的是我希望每个项目都能正常工作。那么任何人都可以提出解决方案吗

0 投票
1 回答
418 浏览

react-native - 使用新的“Pressable”组件实现平滑过渡?

我一直TouchableOpacity在我的 react native 项目中使用它以方便使用,但我有兴趣尝试使用新Pressable组件——考虑到它的 API 有多灵活。

然而,虽然新的API 让我能够轻松地根据状态Pressable更改诸如道具之类的东西,但没有像! 相反,当按下/松开时,转换会立即发生。stylepressedTouchableOpacity

什么是最好的使用方式,Pressable而且在按下/未按下的样式更改之间做出漂亮、平滑的过渡?我假设我必须以Animated某种方式使用 API?有没有人有这方面的例子?

0 投票
1 回答
212 浏览

reactjs - 在 Reanimated 2 中设置另一个值后立即设置值

我正在使用 Reanimated 2 使用 React Native 构建游戏,它的性能非常好,但我有一个问题。

我正在使用共享值来为视图设置动画,因为我们都知道设置共享值的值会自动更改视图的样式,我的问题是,假设它将是用户按下的按钮给视图一个只需通过更改 View 的动画样式中使用的共享值来提高海拔,海拔只是在 y 轴上的平移。

高程值最初为 0。用户单击按钮,值立即更改为例如 500,没有过渡和动画,视图将立即显示在其起始位置上方的 500 处。从 500 开始,View 将通过动画回落到 0。我尝试了下面的代码,但没有帮助。

按下按钮时,视图不会移动,似乎 Reanimated 跳过了第一个elevation.value分配,并且由于第二个分配是 0(相同的旧值),因此视图不会移动。

[编辑] Animated.View 是从 Reanimated 2 导入并使用的。为了简单起见,我把它省略了。

0 投票
1 回答
85 浏览

javascript - Reanimated 2 不能使用具有直接值的 withSequence

我想使用withSequence直接值作为第一个值,使用下面的代码导致应用程序崩溃。

startValue下面的代码似乎工作得很好,但在我的情况下,它对使用inside没有帮助withTiming

0 投票
1 回答
95 浏览

reactjs - React Native Reanimated 2 进入动画不起作用

我正在尝试使用https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/entryAnimations

从文档来看,它看起来很简单,但是当我运行下面的代码时,什么也没有发生:

在我的 package.json 中,我使用的是“react-native-reanimated”:“^2.3.0-beta.3”。

我错过了什么?有没有关于这个主题的推荐教程?

0 投票
1 回答
142 浏览

react-native - 使用 React Native 在屏幕上可靠的绝对位置

获取任何元素在屏幕上的绝对位置的最可靠方法是什么?

我的问题是,当使用我的方法添加上面的元素(父元素)时,我无法获得元素的绝对位置。

上下文:我需要获取一个元素在屏幕上的绝对位置,以检查我的跟随手指的元素(用 reanimated 制作的动画)是否与我无法从中获得绝对位置的那个元素相交。

我尝试过的方法:

这是我在“下拉框”上有一个滑动元素的问题,它只会产生错误的位置。

这个有效但不可靠。它在 useEffect 中触发大约十次,并且只产生一次正确的位置。

我可以尝试其他可靠的方法吗?我不明白为什么很难在屏幕上获得与父级无关的绝对位置。

0 投票
0 回答
31 浏览

react-native - 使用共享值渲染组件集合无法正常工作

我想渲染 7 个容器,我想为它们的背景颜色设置动画 onPress。当我选择第一个时一切都很好,它会动画,但是当我按下第二个时,第一个容器的背景消失(组件的宽度回到 "0%" )。

小吃:https://snack.expo.dev/@georgipavlov/bold-french-fries

容器:

这就是我渲染它们的方式:

0 投票
1 回答
205 浏览

react-native - react-native-reanimated iOS 崩溃

我正在使用 react-native-reanimated,并且在使用此道具时我遇到了 iOS 崩溃Animated.useCode

我的道具主体的完整代码在这里:

当评论这个道具时,应用程序返回工作并且崩溃消失

Xcode 的崩溃输出是:

任何机构都可以帮助我解决这个问题,或者如果之前有过这个问题。

0 投票
0 回答
157 浏览

react-native - 捆绑包期间反应本机复活 v2.3.0 的问题

我刚刚安装了 react-native-reanimated 2.3.0,安装过程没有问题。但是当在 Metro (npx react-native run-android) 中 react native 启动捆绑包时,弹出以下错误:

有人知道我该如何解决这个问题吗?

0 投票
1 回答
95 浏览

react-native - 安装抽屉导航器时需要额外设置吗???Reanimated2 警告。反应原生

有人可以澄清抽屉导航器是否需要除 npm install react-native-gesture-handler react-native-reanimated 之外的其他设置?安装抽屉和 react-native-gesture-handler 后 react-native-reanimated。抽屉上的官方文档不需要额外的步骤。但是,我收到警告“如果您想使用 reanimated 2,请完成安装步骤”。我的模拟器也很有趣。有时它可以工作,有时被冻结,导航不起作用。我怀疑它可能与抽屉有关并复活了。请澄清一下?