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

我正在尝试实现一组 svg 元素的简单动画。该组应该从（横向强制）视口（translateY：-900）的顶部开始，然后从屏幕顶部下降到视口（translateY：0）。我正在尝试使用 react-native-svg 和 react-native-reanimated (v2) 来做到这一点。这是我到目前为止的代码：

如您所见，我尝试使用 SVG 元素上的 useEffect 和 onLayout 事件来触发动画，但似乎都不起作用 - 没有发生过渡。

如果我遗漏了一些明显的东西，我深表歉意，这是我在 react-native 项目中的第一次尝试。我真的很喜欢它，但这让我很难过。与 Reanimated 文档中显示的示例相比，我相信我的实现是正确的，但由于某种原因它不起作用。我创建了一个测试组件，它在视图元素上使用 useAnimatedStyle，它工作正常，所以我很满意该库已正确安装并且正在工作，所以它只能是我的实现。如果您需要更多信息，请不要犹豫，任何帮助将不胜感激。提前致谢。

我刚刚学习v2，但是在使用“worklet”关键字react-native-reanimated创建函数时遇到了问题。

我react-native-reanimated在一个 React Native裸项目上使用npx react-native init myApp.
我已遵循所有react-native-reanimatedv2 安装说明，包括：

• 配置 babel.config.js

• 启用爱马仕，设置为true
• 配置MainApplication.java文件
• 清理构建
• 使用重置缓存yarn start --reset-cache

我尝试制作一个简单的“worklet”函数，如下所示：

正如您在上面看到的，它只是一个简单的代码App.js，但是如果我输入'worklet'关键字，它总是会undefined is not a function出现这样的错误：

我目前在我的应用程序中使用 reanimated 2 来渲染动画。我正在尝试创建不同的动画，让我可以多次按下屏幕，每次按下都会创建一个动画。我不希望下一次按下重置或取消上一次按下。我正在考虑每次按下设置数组状态并向数组添加一个动画对象，然后当动画完成时删除第一个元素以建立一个动态列表。时间将控制它运行多长时间以及何时完成，它将从列表中删除。该组件将只呈现列表中的下一个内容。这是我试图用钩子和 reanimated2 模拟的实现：

https://github.com/n4kz/react-native-material-ripple/blob/39ea61e8345feaa8086899f1a2e90ef31ce422bf/index.js#L128

谢谢！

这是我的组件。这是一个简单PanGestureHandler的一些svg。

<Text>Some Text</Text>什么时候更新怎么办x > 100？

我试图让 20 - 50 颗星“闪烁”（不透明度随随机间隔变化），但这会减慢应用程序的速度。

我正在使用复活的 2.2.0。

我尝试共享不透明度值，但只有 1 个元素应用了样式，我认为这可能是因为：“动画样式不能在视图之间共享。 ”

这是我的整个组件

每张卡可能有 5 个，并且随机数量的卡，比如说 5-20 个。

我已经阅读了文档，但认为我没有正确理解它们，因为我无法弄清楚为什么应用程序正在爬行/冻结/崩溃。就像所有的动画都阻塞了 js 线程，但它们应该在 ui 线程上运行，因为不透明度的变化是由 useAnimatedStyle 钩子“捕获”的，它是一个“worklet”？

使困惑...

我对 react-native-reanimated v2 很陌生，我有这个用例：

我制作了一个 swipeDeck 组件，用户在其中刷卡并显示下一张。动画被实现并且它们工作。但现在我想添加这个新功能，根据滑动手势的 x.value 翻转下一张卡片（Y 旋转）。

旋转有效，但我想在卡片具有背面背景的情况下添加功能。为此，我看到会有 2 个图像。并且基于旋转Y，不透明度交换导致卡片的视觉翻转。

这是我的代码，一旦我实现了辅助方法const { cond, and, greaterOrEq, lesserThan } = Animated;，应用程序就会崩溃。

我这样做对吗？如果没有，我将如何处理这个问题？我目前的方法基于 2019 年的 YT 视频：https ://www.youtube.com/watch?v=eJtwpjCIRsA&t=3s

这里还有一些片段：

这是底层卡片正面的动态样式。

所以基本上每当卡片​​旋转 90 度时，它都需要变得完全透明。并且背面，遵循相同的动画路径，将变得完全不透明。

但是使用这些 v1.xx 方法导入的应用程序崩溃。

我正在使用带有抽屉的 React Navigation。它一直显示警报“如果您想使用 Reanimated 2，请完成我们的安装步骤https://docs.swmansion.com/react-native-reanimated/docs/installation”，这就是我需要安装 Reanimated 2 的原因。

问题是我使用 Realm SDK 将我的应用程序连接到 MongoDB Atlas，当我根据网站上的步骤配置 Reanimated 2 时，应用程序不会加载并且在 Metro Bundler 中没有显示任何错误。

如果我删除 Realm，程序会正常打开并且没有 Reanimated 2 警报。如果我恢复 Reanimated 2 的配置，程序会打开，但警报仍然存在“如果您想使用 Reanimated 2，请完成我们的安装步骤https://docs.swmansion.com/react-native-reanimated/docs/installation ”。

另一件事，当安装 Realm 时，我在运行 react-native run-android 时总是收到以下警告：“此构建中使用了已弃用的 Gradle 功能，使其与 Gradle 7.0 不兼容。”。

我正在使用底片react-native-reanimated(v2.2.0)制作动画，我还需要使用动画更改底片内一个视图的不透明度。

预期的行为。

当底片出现时，视图的不透明度会降低。所以在底页关闭时视图的不透明度应该为 1，当底页打开时不透明度为 0。

问题

我interpolate用来获取底部页面顶部位置之间的不透明度值0以及1相对于底部页面顶部位置的不透明度值，并useAnimatedStyle用于动画不透明度。

然后我在我的上面使用上述样式Animated.View

我正在尝试在 Animated.ScrollView 中为月份选择器无限滚动到两个方向，但一次只渲染 3 个视图

例子：

初始状态（显示第 8 个月）

[7,<8>,9]

当向右滚动到第 9 个月时，状态应该是

[10,8,<9>]

当向右滚动到第 10 个月时，状态应该是

[<10>,11,9]

当向右滚动到第 11 个月时，状态应该是

[10,<11>,12]

当向左滚动到第 10 个月时，状态应该是

[<10>,11,9]

这样做的最佳做法是什么以及如何将滚动视图设置为在最后一个之后重复

谢谢

我已经将 react-native 从版本升级0.64.1到了，0.65.0-rc.3因为需要从 8 月 1 日 21 日起将捆绑包发布到 Google Play。我正在使用升级助手targetSdk=30升级信函现在我收到错误：./gradlew bundleRelease

已经尝试过：

• 删除 node_modules，重新安装
• 清理 gradle、项目、纱线缓存等...
• 试图明确地喷射
• 升级安卓工作室
• 将 react-native-reanimated 升级到最新版本

由于没有稳定的 react-native 版本来满足 Google 的要求，他们花了几个小时感到沮丧。有什么想法让它发挥作用吗？

- - - 编辑 - -

作为临时解决方法，只需更改项目级 gradle 文件中的版本即可：