问题标签 [react-animated]

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

reactjs - 如何向 contentContainerStyle 添加动画?

我目前正在尝试为滚动视图设置动画,因此它会调整到其上方手风琴的高度。我试图通过使用动画来偏移滚动视图,但我不断收到错误“translateY”键的变换必须是一个数字:{“translateY”:0}。如果我将它包装在 Animated.View 中,动画不再起作用?

0 投票
0 回答
2269 浏览

animation - React Native:KeyboardAvoidingView 没有动画

当键盘出现时,有什么特别的事情可以让视图向上滑动吗?根据我看到的所有示例,默认情况下它会这样做,但在我这边,它直接从 A 点到 B 点。

这是我的渲染,其中 FadeInView 只是一个 Animated.View:

和容器样式:

对不起,大代码,但我对这个问题有点绝望......谢谢!

0 投票
1 回答
422 浏览

reactjs - 为文本输入设置高度值动画

所以我使用 react-native-autogrow-textinput 以便在我的应用程序中查看可编辑的文档。我目前正在尝试使用键盘来调整文本输入框的高度,以便所有文本都可见。我找到了以下代码

但是,我得到的结果是:当键盘在屏幕外设置动画时,文本输入的高度保持不变let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150,直到键盘完成滑出屏幕。

然后高度调整以再次填满整个屏幕,除了它有点“弹出”到新的高度。我如何让这个高度的值逐渐增长,所以看起来它只是简单地延伸到适合整个屏幕?我也会在下面发布我的 Autogrow TextInput 代码。任何帮助将非常感激。

0 投票
1 回答
1644 浏览

animation - React Native:如何动画视图从垂直堆叠到水平堆叠

所以,本质上,我有两个视图垂直堆叠以启动,按下按钮它们需要动画,因此第一个视图向左滑动,第二个视图上升并位于第一个视图的右侧。在第一个视图上调整 flex 并在第二个视图上更改顶部和左侧样式似乎很容易,在 IOS 上看起来很棒,但是在 Android 上,这会导致第二个视图在底部被切断时出现问题(大概是因为视图的 flex 或 height 对于内容来说不够高,但不幸的是我无法更改它,因为它会破坏下面其余内容的 flex 样式)。

关于如何解决这个问题的任何建议?

这可能是不可能的,但我想知道是否有办法使用 LayoutAnimation 或 Animated API 将这些视图从 flexDirection 的“列”设置为“行”?那将是疯狂的方便。

0 投票
5 回答
10493 浏览

reactjs - 制作动画可折叠卡片组件,初始道具显示或隐藏

背景

使用 React Native 我能够制作可折叠的卡片组件。在图标上单击卡片会向上滑动隐藏其内容,或展开显示其内容。我认为设置默认值就像设置扩展为 false 或 true 一样简单,但我认为这里的问题是,当它被切换时,会触发一个动画,从而改变卡片的高度。

例子

打开

在此处输入图像描述

关闭

在此处输入图像描述

问题

我的目标是允许调用组件的人将组件的初始状态设置为展开或打开。但是当我尝试将展开状态更改为false它时不会呈现关闭状态。

我将如何允许调用组件的用户选择在初始组件渲染时是展开还是关闭它?

0 投票
4 回答
9076 浏览

reactjs - React Native - 在按钮单击时隐藏和显示组件并带有动画

朋友,当用户单击组件(视图)必须隐藏并再次单击应该显示的按钮时,我在运行时遇到隐藏和显示问题。

我的代码:

我想喜欢下面的图片。

在此处输入图像描述

0 投票
3 回答
2377 浏览

react-native - setState 之后的新动画 - React Native

我的反应原生应用程序找不到我的问题的答案。

如果您知道如何实现这一目标,那就太好了:)

我正在尝试做的事情:

在页面中,当我按下某处时,我想在按下位置显示动画(例如方形幻影)。

我所取得的成就: 当我单击时,会在正确的位置显示一个带有动画的正方形。但是当我点击其他地方时,方块的位置会改变,但动画不会重新启动。

我试过的:

为了制作动画,我在按下位置放置了一个 < View/> (位置:'absolute')。

此 < View/> 嵌入在我在 App 渲染中调用 1 次的组件中:

其中 item.x 和 item.y 是坐标。

这是我的组件的代码:

componentDidUpdate 中的 console.log 为每次单击提供 2 个日志:

{_children: Array(2), _value: 2, ..., _animation: null...}

{_children: Array(2), _value: 0,..., _animation: null...}

我真的不知道接下来该怎么办。

PS:在 NativeScript 中,这更容易。我只需要将新组件添加到 DOM。

0 投票
1 回答
2225 浏览

android - 使用 React Native 的动画过渡无法正常工作

我正在玩 React Native,但我的过渡动画有问题。

Windows 10 - Hyper V, Visual Code Emulator Android - Ignite Boilerplate。

我正在尝试做的事情:

当我单击时,我想在单击位置上显示一个带有从 0 到 2 的比例动画的圆圈。

我有的:

见下图(我放了一个 setTimout 来查看第一帧)。第一次单击时,组件第一次以自然的宽度和高度快速显示,但 0,001 上的比例没有效果。之后,动画从 0,001 到 2 开始。

通过其他点击,圆圈以前一个圆圈的尺寸开始第一帧。然后,动画开始。但是再一次, scale : 0 在第一帧没有效果。

动画开始时获取最后调用组件的数据

这是午餐屏幕的代码:

这里是圆的组成部分:

你知道为什么会这样吗?

0 投票
1 回答
1874 浏览

reactjs - 如何让 React Native 动画再次发生?

目前,我的 React Native 动画只发生一次,然后再也不会发生。每次我的该组件的一个道具发生变化时,我都需要它发生。当新的道具数据进入时,我的数据显示会发生变化,但它只会在第一次动画。每次道具更改/组件更新时,我有没有办法让动画再次发生?

这是我到目前为止所拥有的:

0 投票
1 回答
723 浏览

animation - 使用 React Native + Animated.timing 和 setState 渲染动画

动画库运行良好,但是当我在使用 Animated.timing 时执行 this.setState 时出现问题,因为它会重新渲染我的屏幕并且我的动画会重新启动。

例如,当我尝试使用 Animation.timer 运行动画时,同时我设置了一个间隔,每 1000 毫秒生成一个 setState,这会使我的视图重新渲染并丢失所有动画。

你能帮助我吗?

非常感谢你!