问题标签 [react-native-animatable]

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 投票
2 回答
1141 浏览

react-native - onPress 中的 React-native Animatable 旋转视图

我正在尝试使用以下方法按下图像时旋转我的图像:

我得到错误:

不变违规:使用“rotate”键进行转换必须是字符串:{“rotate”:null}

使用react-native-animatable库。不确定用于转换道具的正确语法是什么。

谢谢。

0 投票
0 回答
80 浏览

reactjs - 取消注册内插动画值

有没有办法取消绑定插值并自行为其设置动画?

在某些功能中,我想在不听 translateX 的情况下自行为 dragX 值设置动画

那可能吗?还是有其他解决方法?

0 投票
0 回答
2306 浏览

reactjs - this.props.position.interpolate 未定义且不是函数

我有一个具有滚动视图的组件

函数 setScrollable distance 将 scrollY 的值分派到全局存储

在减速机中我有

来自 reducer 的 scrollY 的值被用于使用 Animated API 更新另一个组件中的页脚高度。

在这里,我收到 this.props.app.scrollY.interpolate 未定义且不是函数的错误。

我应该怎么办?

0 投票
1 回答
2481 浏览

react-native - React原生倒计时圈如何实现

有人,请帮我在 react-native 中实现倒计时圈我希望计时器从 300 秒开始下降到 0,其中有一个动画圈和文本(时间)。我尝试使用https://github.com/MrToph/react-native-countdown-circle

但这里的问题是文本(时间)在一个完整的动画后更新。您还可以看到我在那里打开的问题。

下面是我的实现的代码片段

0 投票
0 回答
515 浏览

reactjs - 警告:道具类型失败:提供给“图像”的“对象”类型的无效道具“不透明度”,应为“数字”

在开玩笑时,我收到了这个奇怪的警告

我的actaul组件代码如下

谁能帮我摆脱这个警告。从减弱的消息中,我可以看到测试框架无法识别 Animated 值。

文档中的任何地方都没有提到它,似乎没有其他人收到此警告。如果我做错了什么,请告诉我。

0 投票
0 回答
1195 浏览

react-native - 反应原生改变 Animated.Image 源而不闪烁

当组件中任何图像的源发生变化时,我会尽量避免出现闪烁。

为此,我搜索并决定使用 ref(直接操作)

但它并没有改变任何东西,所以我使用传统方式,改变状态中的 url 属性,它可以工作但会发生闪烁。

更改图像源,当图像开始移动时触发;("onPanResponderStart") 函数。这是代码;

如何在不重新渲染导致闪烁的组件的情况下编辑图像源?

0 投票
2 回答
1258 浏览

reactjs - 重新加载动画 React-native-animatable 库

伙计,我正在使用 react-native-animatable 库。基本上,当我加载我的应用程序时,动画会运行,但是,当我转到另一个选项卡并返回初始页面时,动画不再运行。我认为这是因为它不再重新加载,我想知道如何重新加载组件。如您所见,视图有一个动画道具,它是必须加载的动画。

0 投票
0 回答
1310 浏览

react-native - 将本机设置动画值反应到动画

我设置了一个简单的动画值,例如:

在这里我想切换一个视图。

如果为 1,我只想将值设置为 0,反之亦然,以便我可以将样式相应地应用于另一个动画视图。

是否有可能我可以将动画值设置为动画值。

它不适合我吗?或者有更好的方法来做到这一点

0 投票
2 回答
847 浏览

react-native - 平面列表 android 动画无法按预期工作

我正在尝试对 flatList 内的项目制作动画。每个项目将从右到左出现。在 IOS 上可以正常工作,但在 ANDROID 上不行。

动画包含淡入和变换: translateX 动画。

如果有其他方法可以在 IOS 上制作,我会很高兴在这里,它应该是一个动态列表

FadeInView 组件:

}

父组件:

安卓苹果手机

0 投票
1 回答
1921 浏览

animation - 在 React Native 中通过用户触摸旋转光盘

我想在 中创建一个类似圆盘的组件react-native,用户可以通过触摸旋转它,并相应地相对于标记对齐段。

下面是我打算制作的组件的图像:

在此处输入图像描述

中心有 3 个圆盘,每个圆盘都应单独旋转。每张光盘上都有一些带有一些值的段。一旦段对齐,它可能如下图所示:

在此处输入图像描述

我正在寻找一种通过用户触摸来旋转光盘的方法,以便可以对齐段并显示相应的值。

我一直在尝试查看React Native AnimatedAPI,但不确定是否可以使用它来实现。

另外,我不知道如何进行用户触摸输入以旋转光盘。