问题标签 [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 投票
3 回答
1358 浏览

reactjs - 如何为一组组件创建一个动态的 React 钩子数组

我想将动画样式应用于组件数组,但是由于useSharedValueuseAnimatedStyle都是钩子,因此我无法遍历道具并为每个组件创建共享值和相应的样式。

我怎样才能达到同样的效果?

编辑:更新以添加完整代码。

0 投票
1 回答
1081 浏览

android - @gorhom/react-native-bottom-sheet 不适用于 Android

我一直在使用该库为我的 react native 应用程序创建底部表单模式,但它似乎不适用于 Android,但在 iOS 上却可以。我使用了文档中建议的相同背景组件和手柄组件,并且包含的​​所有内容都是提供程序,并且 SafeAreaView 我的 package.json 包括

代码结构如下:

我为包含插件的 react-native-reanimated 使用了正确的 babel 配置,但它显示出来,然后我无法拖动关闭。

0 投票
0 回答
1048 浏览

javascript - 一段时间后同步“React Native Reanimated 2”中的循环动画

我正在使用 reanimated v2 为应用程序创建动画。我正在创建一个带有三个上下跳跃的点的启动(加载)屏幕。这 3 个点之间应该有一定的恒定 延迟间隔)。就像其他人在 facebook 的 Messenger 中输入时的动画一样。

动画一开始看起来不错,但过了一会儿,2 个点甚至 3 个点取决于延迟和持续时间同步 我剩下 2 个或 3 个点彼此绝对同步。这是问题动画视频的视频

我对 react-native 和复活非常陌生。所以我假设问题出在我的代码中。我不知道这是否是正确的方法。我在 reanimated v1 中看到的代码示例具有“ startClock ”和自定义“ runTiming ”功能,但我在 v2 的文档中找不到它们。复活的文档

有人可以告诉我为什么动画最终会同步,以及用相同的动画制作三个元素但有一些恒定延迟的正确方法是什么。谢谢你。

0 投票
0 回答
205 浏览

react-native - 无法在 react-native-scroll-bottom-sheet 中滚动 FlatList

我在一个项目中使用 react-native-scroll-bottom-sheet ,就像文档中所说的那样,但最终我仍然无法在 BottomSheet 中滚动我的 FlatList。我想这是因为复活的lib。但是文档说我可以使用 v2+ 版本...

我的 BottomSheet 组件如下所示:

我希望有人有同样的问题,所以你可以帮助我

0 投票
1 回答
561 浏览

reactjs - interpolateNode vs interpolate : interpolate 在动画高度时会导致卡顿,而 interpolateNode 不会

我刚刚开始使用react-native-reanimated. 而且我想使用reanimated v2api(较新的)。

在此示例中,使用interpolateNodeinterpolate

这是示例

您可以在这里查看小吃:- https://snack.expo.io/@sapien/tactless-orange

问题 :-

  1. interpolate和 和有什么不一样interpolateNode
  2. 如何选择使用它们中的任何一个?
  3. 为什么一个比另一个性能好?
0 投票
1 回答
150 浏览

react-native - 通过 forwardRef 传递 useAnimatedGestureHandler

我即将用新的 React Native Reanimated 替换旧的 React Native Animated 库以获得性能问题,但我遇到了一个我无法解决的问题。

在我在网上找到的所有示例中,我看到使用创建的GestureHandleruseAnimatedGestureHandlerAnimated.View. 实际上,这有时是不可能的。

在我之前的应用程序中,我只是将GestureHandler对象传递给组件,forwardRef但似乎React Native Reanimated无法做到这一点。我不知道我是有语法错误还是只是一个错误。

我已将 GestureHandler 保存在 useAnimatedRef 中, handlerRef.current = useAnimatedGestureHandler({})使事情更具代表性。然后我将 ref 直接传递到组件的PanGestureHandlerUsingHandlerDirect。结果是,当我拖动蓝色框时,框将跟随处理程序。所以这个版本有效。

但是一旦我将手势事件传递handlerRefUsingHandlerForwardRef组件,就会触发非手势事件。我希望当我拖动红色框时也会跟随处理程序,但它不会

有人知道是我还是图书馆中的错误?

干杯

0 投票
1 回答
251 浏览

reactjs - Reanimated 2 hooks 中依赖参数的更好用例是什么?

我一直在阅读重新激活 2 Hooks 的文档并在所有互联网上搜索更好解释的博客或任何代码,但找不到任何一个,任何人都可以解释并给出源代码示例。作为示例

但是当我尝试

我得到了错误

0 投票
0 回答
580 浏览

android - React Native 2 依赖项 - 2 个版本:ID 为 2 的动画节点已经存在

我意识到这已经被问过很多次(githubstackoverflowexpo.io),通常有一个解决方案,但是我已经尝试了所有这些,所以我认为我的情况可能会有所不同。

我已经开发(甚至以某种方式发布)了一个使用 Expo 的本地反应应用程序。今天早上,我将 Expo SDK 从版本 40 更新到 41。iOS 没有问题,仅在 android(模拟器和真实设备)上。

我认为问题在于 react-native-router-flux 指的是 react-native-reanimation 的较旧依赖项。SDK 41 需要 v2.2.0 而 react-native-router-flux 只需要 v1.13.3

我到目前为止:

  • 删除 package-lock.json 的内容并运行npm install
  • 删除了基本导航依赖项和 react-native-router-flux 并使用重新安装expo install(我读到这比在 Expo 托管项目上使用 npm install 更好。)
  • 将 Babel 插件添加到 babel.config.js - plugins: ['react-native-reanimated/plugin']
  • 重置缓存并运行watchman watch-del-all
  • 来回更改本机反应的版本无济于事。
  • 今天大部分时间都在试图解决这个问题。

我没有但想尝试:

  • 要更新 RN 路由器通量对 RN 的依赖,重新激活以使用最新和已安装的版本(但我不确定如何)。根据此评论,我“处于困难时期”。

我不想:

  • 恢复到 SDK 40,因为我需要针对位置的模块特定权限方法,因为 Google Play 已经从商店中删除了我的应用程序以解决权限问题(这么多箍!)

有关更多详细信息,请参见下文 - 如果您需要任何其他信息,请告诉我。

展会诊断:

package.json(RN 复活现在说 v~2.1.0 但在我再次使用它之前它是 2.2.0。

package-lock.json (我可以包含所有这些,但它是 23k 行,所以我刚刚包含了 RN 重新激活的引用。)

0 投票
0 回答
157 浏览

javascript - 如何在 FlatList renderItem 中使用 useAnimatedStyle?

我试图在使用 renimatedV2 滚动时创建轮播效果,并且我意识到由于 useAnimatedStyle 挂钩依赖项,我无法将动画样式应用于视图。原因是它是一个钩子,我不能将它放在 renderItem 中。我需要将它放在 renderItem 内的原因是因为插值取决于项目的索引。有解决办法吗?当然,软件大厦中非常了不起的人在创建 renimatedV2 时考虑到了这一点,但我就是找不到解决方案。

0 投票
2 回答
881 浏览

react-native - React native reanimated useAnimatedStyle 不断向我吐口水

我正在尝试为带有reanimated react native的图标实现一些淡入和淡出过渡。它的版本是2.1.0。我正在使用世博会的基本工作流程。代码看起来像这样

对我来说,似乎没有问题,因为我实际上做了与文档中相同的事情。但它不断向我吐出错误,例如

我试过用 重置缓存expo start -c,但没有用。我应该怎么做才能解决这个问题?