问题标签 [react-native-reanimated]

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 回答
658 浏览

react-native - 使用 react-native-redash 时意外闪烁

我是新手,使用 react-native-redash 来执行一些基于 react-native-reanimated 库的动画(这在性能方面很棒)。

我的代码如下:

这将使用简单的动画(如不透明度或缩放)打开一个模式,并在按下关闭按钮时关闭。

当模态打开时,一切都按预期工作。问题是模式何时关闭。附上一个描述性问题的 gif。

当模态关闭时,您有什么想法如何解决这个闪烁的动画?

在此处输入图像描述

谢谢!

0 投票
0 回答
641 浏览

react-native - 重新激活的 useCode 挂钩无法按预期工作

react-native-reanimated在我的应用程序上使用。我也在用react-native-redash。我正在尝试使用一些手势制作模式,所以我有以下代码:

所以,这个手势很好用,但在某些特定时刻我需要显示或隐藏我的模态,所以我声明以下内容:

这就是问题所在,当再次执行onSnap函数时,我真的不知道为什么会这样,因为我正在使用 deps for prop,这是来自父组件的属性,用于显示或隐藏模态的。我在使用deps 时遇到了很多问题,因为它没有按我的预期工作。有人可以帮助我,o解释一下是否工作得一样好?redashuseCodevisibleuseCodeuseCode

0 投票
1 回答
536 浏览

javascript - 在 React Native 中,值的值不能从 ReadableNativeMap 转换为 Double

我正在尝试ams使用react-native-reanimated. 我很确定这是因为动画组件,但无法弄清楚如何解决它。

错误

应用程序.js

Logo.js

0 投票
0 回答
99 浏览

react-native - 在 React Native 中使用 Animated.timing() API 来滑入/滑出内容

我的 React Native 应用程序中有一个屏幕,它使用 Hooks 根据一些切换按钮显示/隐藏内容。一切正常,但我想改进 UI 并添加一些动画以滑入新内容并滑出旧内容。

这是我的代码...

我正在使用 setActiveSwitch() 根据我单击的按钮设置状态。

我以前从未使用过动画 API,并尝试查看此处的文档,但无法使其正常工作。任何帮助,将不胜感激。

0 投票
0 回答
135 浏览

react-native - 如何在 React Native(动画 API)中更新弹簧动画的 toValue?

我希望能够更改toValue响应道具更新的动画。React Native AnimatedAPI的官方文档指出 spring 方法

根据基于阻尼谐波振荡的解析弹簧模型对值进行动画处理。跟踪速度状态以在 toValue 更新时创建流体运动,并且可以链接在一起。

但是,我还没有找到任何我们可以更新的地方toValue。基本上,我的组件如下所示:

这不适用于所有情况。特别是如果loadPercentage更改过于频繁,组件会占用大量资源。这有点道理,因为我正在为每次更新创建一个新动画。相反,我想简单地修改toValue而不启动新动画或类似的东西。

这似乎很基本,但经过 4 小时的尝试/谷歌搜索后,我放弃了。-.-

以防万一,我也尝试过使用react-native-reanimated,但也没有运气。

0 投票
1 回答
740 浏览

react-native - react-native-gesture-handler 在移动完成后不更新值

我正在使用 react-native-gesture-handler 和 react-native-reanimated。移动完成后,我正在尝试更新一些不起作用的值。这是代码:

0 投票
0 回答
947 浏览

react-native - 如何在模型内部使用 BottomSheet

想在Modal. 我正在使用reanimated-bottom-sheet本机模式并做出反应。

但是当我使用BottomSheet内部Modal手势时不起作用并且无法BottomSheet通过向下滑动来关闭。

我搜索了一下,发现这是RCGH个问题。

所以我决定使用View而不是Modal.

View不包括Header

这是底部表代码:

这是样式:

所以问题可以通过解决手势Modal或做一些事情来Header解决View

我正在使用React Navigation.

0 投票
0 回答
477 浏览

react-native - React native Reanimated:计时()持续时间不起作用

我试图让元素一旦PanGestureHandler被释放就返回到它的初始位置。

这是runTiming功能:

问题是元素立即返回。为什么 3000 毫秒的持续时间不起作用?

0 投票
0 回答
300 浏览

react-native - React-native-reanimated:如何将值分配给 ScrollView scrollEnabled 属性?

我正在尝试使用 reanimated 来控制 ScrollView Value。在 iOS 上工作正常,但 android 抛出此错误:

这是代码:

我如何使它工作?

在此处输入图像描述

0 投票
0 回答
1663 浏览

react-native - 测试错误:测试时 useSharedValue 不是函数

描述

我正在使用 react-native-reanimated 并且在测试时,useSharedValue 会抛出一个错误,即在使用 jest 和 react-native-testing-library 时它不是函数。我通过使用作为包的一部分提供的模拟来模拟 react-native-reanimated。我还注意到 VS Code 突出显示 reanimated 没有导出成员 useSharedValue、useAnimatedStyle 和 withTiming,但是该组件仍然可以正常运行而没有任何错误。

有谁知道需要做什么才能正确模拟它?

代码

用于查看组件是否呈现的测试

放置在名为 react-native-reanimated.js 的模拟中的模拟文件

使用 Reanimated 的组件 - Switch.tsx

包版本

React:16.11.0 React Native:.062.2 React Native Reanimated:2.0.0-alpha.3

截图

VS Code 截图 测试错误