问题标签 [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 回答
7527 浏览

react-native - react native 中的上下滑动动画

我在本机反应中使用上下动画,但是动画只是从上到下滑动然后停在底部我想连续上下移动它。我也使用了动画循环,所以请检查并为我提供解决方案

我也尝试使用 react-native-animatable 包,但它对我来说不好用,因为它从屏幕顶部开始动画。

0 投票
0 回答
40 浏览

reactjs - 在 React Native 中单击图像时如何缩放图像

单击图像时,我需要缩放图像。在 React Native 中再次单击时,我需要缩放回其原始大小。在此处输入图像描述

0 投票
0 回答
324 浏览

typescript - 在加载或在 React Native 中显示时动画反应导航底部选项卡导航屏幕的组件

我正在寻找一个教程来实现延迟加载或在底部导航被路由到另一个屏幕(当屏幕更改时)而不是在没有任何动画的情况下显示它时向屏幕显示一些动画。我没有找到页面交易动画。但是我设法在页面打开时为屏幕中的组件设置动画,以便用户在打开屏幕时看到一些动画。延迟加载仅在第一次导航加载时实现

我使用react-native-animatable为组件设置动画。我不知道我是否以正确的方式这样做。

这是我的代码。

我得到了这些结果

在此处输入图像描述

我的问题

  1. 这是正确的做法吗,利弊是什么?
  2. 换屏时如何实现换屏动画?(我只看到堆栈导航屏幕更改的动画,但没有看到底部标签导航
  3. 如果我将 ref 添加到 Animatable.View 组件,并且如果我尝试在 didcomponentmount 动画上调用动画为什么没有被触发(或者您能否提供任何示例)?

还有如何在隐藏和显示时为反应导航堆栈导航标题设置动画。

0 投票
1 回答
165 浏览

react-native - 当针脚不正确时反应原生摇针视图

我正在尝试实现一个功能,当用户输入错误的密码时,4 个小圆圈左右晃动。

我创建了一个动画组件来测试我的代码并且它正在工作但现在我的问题是我如何仅在密码不正确时应用它?

目前,当我输入错误的密码时,没有任何反应。我期望的是视图水平移动。

0 投票
1 回答
683 浏览

react-native - 在无限动画中更改持续时间

我尝试制作一个循环无限的脉冲动画视图。以下视图实现了该动画。但我想在动画时更新动画持续时间。实际上它不会更新循环动画。向 useEffect 依赖项添加持续时间无法正常工作,因为它刷新了当前动画圆圈。

像这个(来源):

示例

这是我当前的代码:

0 投票
1 回答
136 浏览

react-native - 反应原生动画未运行

我正在使用 react-native-animatable 库为加载图标设置动画。在我决定将它用于我的新项目之前,我已经有一段时间没有接触过了。当我将它添加到我的代码中时,它会做任何事情,我真的很困惑为什么它没有运行。加载器在视觉上存在,但没有动画。我不知道问题是什么,因为我上次使用它工作正常。

编码:

0 投票
0 回答
235 浏览

react-native-reanimated - useAnimatedStyle 返回的样式常量导致应用停止工作

我在 React Native 0.64 应用程序中有一个简单的 Accordion 组件,使用react-native-reanimated 2.1.0. 动画 var 定义为animatedVar. 以下是相关代码:

如果accordStyle从上面的代码中删除,则手风琴工作正常(我的意思是没有错误)。但app stopped working如果accordStyle包含在style. 但我无法弄清楚有什么问题accordStyle

0 投票
0 回答
59 浏览

react-native - 如何实现这个动画平面列表

我想要 Flatlist 项目的大小小于前一个项目,当我开始滚动时,项目大小必须根据项目列表的位置进行更改,当涉及到第一个位置时,它应该显示项目大小和列表第一个项目的实际大小。

这是我想要实现的设计

设计形象

0 投票
1 回答
76 浏览

css - react native 如何从视图底部放大?

我想用 scaleY 放大动画以填充视图。问题是它从中心而不是底部开始。如何更改它以使动画从底部开始?

我正在为这个动画使用 react-native-animatable。

0 投票
0 回答
1171 浏览

typescript - 不变违规:inputRange 必须是单调非递减的 NaN,NaN,NaN

因此,我正在关注 Catalin Miron 的视频教程,内容是使用本机反应创建计时器(此处链接到视频)。但问题是视频播放到 9 分 57 秒,我的应用程序给了我这个错误:

这是我的 App.tsx(是的,这是一个打字稿反应原生项目)

除了打字稿,这个应用程序还使用 Expo 来工作请帮我找到一个解决方案,我查看了谷歌搜索和 github 页面,他们在谈论轮播而不是平面列表。提前谢谢你还要注意 const 值正在工作并且不是未定义的