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

react-native - 反应导航:使用向上滑动效果手动更改屏幕

我有一个带有可滚动内容的 WebView (react-native-webview) 屏幕。如果用户在到达 WebView 末尾后继续滚动,我想通过向上滑动动画将用户带到另一个屏幕。使用 WebView 的 onScroll 函数属性,我能够确定用户是否已到达内容末尾。但我无法将用户带到具有动画效果的不同屏幕。

由于 WebView 在 android 和 ios 平台上的行为不同(即使在 ios 上到达内容末尾也可以继续滚动),我不得不使用 PanGestureHandler 来识别用户在到达网页内容末尾后是否正在执行向上滑动操作。但是当我手动尝试将用户导航到不同的屏幕时,我无法创建类似于下面 GIF 中的向上滑动效果。

我在我的应用程序中使用 react-navigation v5。

我已经尝试过使用 react-native-swiper。它在 Android 中不能很好地工作,因为它在内部使用 Scrollable 并且 WebView 在 Scrollable 组件内停止滚动。

我在这里使用自定义 HTML 内容,因此替换 WebView 并不是一个真正的选择。有没有办法利用 Stack Navigator 来创建这样的效果?

向上滑动换屏

谢谢你。

0 投票
3 回答
308 浏览

react-native - 将动画项目添加到平面列表水平项目

我有如下水平的平面列表,当我向右滑动以及新项目对视图可见时,我试图添加反弹效果。

我在viewableItemsIndices的 flatlist 中有所有可见项目,现在我如何根据其索引将动画动画跟踪到单个项目..

编辑:下面是完整的代码

FlatWrapper.js

0 投票
0 回答
103 浏览

react-native - 表情符号在本机反应中旋转动画

我想动画表情符号波做这样的事情: https ://codepen.io/jakejarvis/pen/pBZWZw

知道如何在React Native上实现这一点吗?

0 投票
1 回答
103 浏览

reactjs - 有条件的动画组件是 janky

我正在尝试为我的应用创建一个 InputAccessoryView。它有一个 TextInput 和一个 Pressable 按钮。

我想做的是,当 TextInput 有空值时隐藏按钮,否则使用反应原生动画显示按钮。

我想出了按预期工作的工作组件。对于我正在使用的动画useNativeDriver: true

但是,有一个问题:

  1. 当 text 为空并且我输入一个单词然后pause时,显示的动画动画流畅。(如下图所示)

在此处输入图像描述

  1. 但是当文本为空并且我连续输入时,显示的动画就会以一种笨拙的方式进行动画处理。(如下图所示)

在此处输入图像描述

这是代码,也是世博小吃的链接:

每当文本更改时,动画似乎都会暂停(并再次动画)。你能帮我当文本不为空时如何为按钮设置动画以平滑显示吗?

0 投票
1 回答
154 浏览

react-native - React Native 如何同时旋转和平移

如何同时旋转和平移?在下面的示例中,我期望正方形向右移动并围绕自己的轴旋转,保持相同的中心 y 轴。如果你能想象一个轮子在路上行驶

相反,它疯狂地飞走

任何帮助,将不胜感激

0 投票
1 回答
73 浏览

javascript - 关于在每次迭代时更新反应原生组件值并作为动画运行

我有大量的文本数据并分成小部分并保存到数组中(在其 props.frames 的代码中)
,现在我想在迭代列表 "frames" 时将这些片段设置为 qr 代码。我尝试了以下但它不起作用。

  • 我知道有 Animated.loop api,但我不确定如何在我的情况下应用此逻辑,我的意思是在每次迭代时如何动态刷新 qr 代码值
  • 如果您有任何建议,我们将不胜感激。
0 投票
1 回答
54 浏览

react-native - 反应原生图像滑块动画

有4张图片。每当我交换它们时,我都希望有一个平滑的动画过渡。我如何在我当前的代码中应用它?

点击这里查看代码

另请查看第二张截图。当没有图像时,我不希望左侧交换选项处于活动状态。但它会交换 1 个额外的时间并停止。我的逻辑有什么问题?

这是屏幕截图

0 投票
0 回答
13 浏览

animation - 嗨,我想在 react native 中制作一个如下所示的屏幕,它使用从一点到另一点的动画

我想在本机反应中制作如下所示的屏幕,它使用从一点到另一点的动画。它应该显示一个加载器,直到任务完成然后一个检查勾号,这里要做的主要是每个任务完成后从第一个点到第二个点然后第三个和第四个点的线动画,请帮我构建这个,我是反应原生的新手,非常需要一点帮助。这些任务 1、任务 2 定义了动画的点

0 投票
0 回答
63 浏览

reactjs - 在 React-Native 中渲染屏幕内容之前渲染底部标签动画。需要一个用于滞后动画的 Workarround

我正在将此库用于动画底部选项卡导航器(为方便起见,调用 BTNav)。它为选项卡容器组件的位置和宽度设置动画。 在此处输入图像描述

问题是,当导航到之前未渲染的屏幕时,动画开始滞后。这种行为的原因是,屏幕组件和动画的渲染由单个主线程处理,如此 freecodecamp 帖子中所述

我无法使用创建类似的动画,useNativeDriver:true因为它不支持此处提到的位置和宽度动画。

有什么方法可以使用生命周期钩子或其他方法,以便在 BTNav 的动画结束之前不会渲染屏幕?

或者是否可以在首次渲染 BTNav 时预先渲染所有屏幕(与 BTNav 相关)

0 投票
1 回答
154 浏览

javascript - React Native 中具有持续时间的动态文本背景高亮动画

我一直坚持在一段时间内动态突出显示一些文本。例如,我有这个文本:

我希望该功能在 180 秒内突出显示此文本背景。

我所做的是这样的:

视频链接

我使用的逻辑是我创建了两个状态 s1、s2 和 s1 作为空字符串,以及 s2 的全部内容。说明计时器,我从 s2 中删除 n 个字符并在 s1 中添加相同的 n 个字符,并在 s1 和 s2 中一起显示<Text>

此功能正在运行,但动画不正确。我想要一些 CSS 过渡类型的平滑高亮动画,以便在一段时间内完全突出显示该文本。

谁能帮我使用React Native Animations API实现这个功能

提前致谢。