问题标签 [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.
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 screen
和item component
我在 itemList 屏幕中没有任何动画代码。我只是重新调整项目组件。
在项目组件内部sharedValue, useEffecthooks, and useState
。我得到了一个用于根据用户交互进行动画处理的组件。
项目组件
正如你在代码中看到的,我的意图是当用户按下button 1
隐藏的细节时button 1
会显示出来。
但事情只是第一次起作用。我认为是因为shared value
. 我想要的是我希望每个项目都能正常工作。那么任何人都可以提出解决方案吗
react-native - 使用新的“Pressable”组件实现平滑过渡?
我一直TouchableOpacity
在我的 react native 项目中使用它以方便使用,但我有兴趣尝试使用新Pressable
组件——考虑到它的 API 有多灵活。
然而,虽然新的API 让我能够轻松地根据状态Pressable
更改诸如道具之类的东西,但没有像! 相反,当按下/松开时,转换会立即发生。style
pressed
TouchableOpacity
什么是最好的使用方式,Pressable
而且在按下/未按下的样式更改之间做出漂亮、平滑的过渡?我假设我必须以Animated
某种方式使用 API?有没有人有这方面的例子?
reactjs - 在 Reanimated 2 中设置另一个值后立即设置值
我正在使用 Reanimated 2 使用 React Native 构建游戏,它的性能非常好,但我有一个问题。
我正在使用共享值来为视图设置动画,因为我们都知道设置共享值的值会自动更改视图的样式,我的问题是,假设它将是用户按下的按钮给视图一个只需通过更改 View 的动画样式中使用的共享值来提高海拔,海拔只是在 y 轴上的平移。
高程值最初为 0。用户单击按钮,值立即更改为例如 500,没有过渡和动画,视图将立即显示在其起始位置上方的 500 处。从 500 开始,View 将通过动画回落到 0。我尝试了下面的代码,但没有帮助。
按下按钮时,视图不会移动,似乎 Reanimated 跳过了第一个elevation.value分配,并且由于第二个分配是 0(相同的旧值),因此视图不会移动。
[编辑] Animated.View 是从 Reanimated 2 导入并使用的。为了简单起见,我把它省略了。
javascript - Reanimated 2 不能使用具有直接值的 withSequence
我想使用withSequence
直接值作为第一个值,使用下面的代码导致应用程序崩溃。
startValue
下面的代码似乎工作得很好,但在我的情况下,它对使用inside没有帮助withTiming
。
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”。
我错过了什么?有没有关于这个主题的推荐教程?
react-native - 使用 React Native 在屏幕上可靠的绝对位置
获取任何元素在屏幕上的绝对位置的最可靠方法是什么?
我的问题是,当使用我的方法添加上面的元素(父元素)时,我无法获得元素的绝对位置。
上下文:我需要获取一个元素在屏幕上的绝对位置,以检查我的跟随手指的元素(用 reanimated 制作的动画)是否与我无法从中获得绝对位置的那个元素相交。
我尝试过的方法:
这是我在“下拉框”上有一个滑动元素的问题,它只会产生错误的位置。
这个有效但不可靠。它在 useEffect 中触发大约十次,并且只产生一次正确的位置。
我可以尝试其他可靠的方法吗?我不明白为什么很难在屏幕上获得与父级无关的绝对位置。
react-native - 使用共享值渲染组件集合无法正常工作
我想渲染 7 个容器,我想为它们的背景颜色设置动画 onPress。当我选择第一个时一切都很好,它会动画,但是当我按下第二个时,第一个容器的背景消失(组件的宽度回到 "0%" )。
小吃:https://snack.expo.dev/@georgipavlov/bold-french-fries
容器:
这就是我渲染它们的方式:
react-native - react-native-reanimated iOS 崩溃
我正在使用 react-native-reanimated,并且在使用此道具时我遇到了 iOS 崩溃Animated.useCode
我的道具主体的完整代码在这里:
当评论这个道具时,应用程序返回工作并且崩溃消失
Xcode 的崩溃输出是:
任何机构都可以帮助我解决这个问题,或者如果之前有过这个问题。
react-native - 捆绑包期间反应本机复活 v2.3.0 的问题
我刚刚安装了 react-native-reanimated 2.3.0,安装过程没有问题。但是当在 Metro (npx react-native run-android) 中 react native 启动捆绑包时,弹出以下错误:
有人知道我该如何解决这个问题吗?
react-native - 安装抽屉导航器时需要额外设置吗???Reanimated2 警告。反应原生
有人可以澄清抽屉导航器是否需要除 npm install react-native-gesture-handler react-native-reanimated 之外的其他设置?安装抽屉和 react-native-gesture-handler 后 react-native-reanimated。抽屉上的官方文档不需要额外的步骤。但是,我收到警告“如果您想使用 reanimated 2,请完成安装步骤”。我的模拟器也很有趣。有时它可以工作,有时被冻结,导航不起作用。我怀疑它可能与抽屉有关并复活了。请澄清一下?