问题标签 [layout-animation]

React Native LayoutAnimation允许在下一个布局发生时自动将视图动画到新位置。

我有存储在 Redux 中的项目，这些项目作为属性传递到呈现它们的组件中。当属性更改时，我希望组件内容相应地进行动画处理。但是，我不确定要在组件中的哪个位置调用LayoutAnimation.configureNext().

该componentWillUpdate方法似乎是在渲染之前调用的正确位置，但该方法已弃用并将被删除。 componentDidUpdate为时已晚，因为渲染/布局已经发生。

我通过将属性复制到组件状态并调用LayoutAnimation.configureNext()in来使其工作componentDidUpdate，这会强制使用动画进行第二次重新渲染。这可能具有额外的好处，即在某种程度上将此组件的更新与可能有其他组件更新的前一个渲染周期隔离开来，但这似乎很麻烦。

应该在生命周期中的什么地方LayoutAnimation.configureNext()调用方法？

我有一张卡片列表，当按下其中任何一张时，我想增加该卡片的高度，所以我使用 layoutAnimation 来处理这种情况，因为当我使用 RN 的 Animated API 时，我在 setNativeDrive "height" 无论如何，就我而言，它会增加列表中每张卡片的高度，

那么我该如何解决呢？

代码片段

现场演示

它曾经被推荐用于componentWillReact()触发布局动画以响应可观察值的变化，如下所示：

但是，componentWillReact()已在 mobx-react@6 中删除。

推荐的替代品是什么？我的可观察类应该对它的观察者一无所知，所以我正在寻找类似的事件驱动解决方案。

谢谢！

我的应用程序在 android 设备上的生产模式下崩溃。基本上它发生在 Android 10（三星、小米、华为、LGE）上。

堆栈跟踪

反应原生版本：

我有动画变量的文件：

在我的应用程序的不同位置使用 var 之后，例如在切换方法中的 TitleExpanding 组件中：

我认为这是类似的问题https://github.com/facebook/react-native/issues/25832。如果有人遇到同样的错误，请告诉我。

我正在使用带有地图的 react-native 的 LayoutAnimation 自定义组件。在 ios 上动画可以正常工作，但在 android 上不行。我正在更改组件高度

}

LayoutAnimation 是 React Native 的一部分，它会在渲染视图时自动为组件设置动画。

官方文档在这里：

https://reactnative.dev/docs/layoutanimation

但是，文档中的示例不起作用。示例中应该设置动画的对象只是从起始位置跳到结束位置。

以下是文档中似乎没有动画的小吃之一的示例：

https://snack.expo.io/91MUQd5IH

这将导致一个结论，即这个 API 只是不受支持或不再起作用。

是不是布局动画不起作用？或者，如果它在某些情况下确实有效，请分享一个包含有效 Snack / Gist 的链接，其中包含一个非常简单但有效的 LayoutAnimation 示例。

更新： LayoutAnimation 可能不支持 web。有没有人对此有任何了解，或者谁能向读者推荐文档中的解释？

我在函数组件中使用 layoutAnimation 使其看起来流畅。它在 IOS 上运行良好，但在 Android 上，当我使用 layoutAnimation 从另一个视图切换到视图时，它会显示额外的蓝色透明背景。

这是我的代码

有没有人遇到同样的问题？

多谢。

在我看来，React Native 只在 iOS 上添加了默认的 LayoutAnimations。我为 iOS 和 Android 和 iOS 布局和 CSS 更改设置了完全相同的代码。例如隐藏/显示一些视图有spring或easeIn动画。或者更改 Text 值似乎有某种淡入淡出动画。但是我没有在我的代码中的任何地方定义它们。我也在使用 react-native-paper ，起初我认为这是造成这种情况的原因，但我将它与其他可能导致这种情况的库一起删除了，但它仍在发生。基本上它只发生在 react-native 的组件上。为了以防万一，我也会把我的 package.json 放在下面。有没有人有同样的问题？是否可以在 iOS 上完全禁用 LayoutAnimations？

作为一种解决方法，我尝试通过定义自己的 LayoutAnimation 来覆盖动画。然后我收到以下警告：

警告：在第一次开始之前用新的布局动画覆盖以前的布局动画：<RCTLayoutAnimationGroup: 0x283352f70; 创建布局动画：<RCTLayoutAnimation：0x282628f80；持续时间：0.700000；延迟：0.000000；属性：不透明度；弹簧阻尼：0.000000；初始速度：0.000000；动画类型：1;>; 更新布局动画：<RCTLayoutAnimation：0x2826285c0；持续时间：0.700000；延迟：0.000000；属性：（空）；弹簧阻尼：0.400000；初始速度：0.000000；动画类型：0；>；删除LayoutAnimation：<RCTLayoutAnimation：0x282628040；持续时间：0.700000；延迟：0.000000；属性：不透明度；弹簧阻尼：0.000000；初始速度：0.000000；动画类型：1；>> -> <RCTLayoutAnimationGroup：0x2832836f0；createdLayoutAnimation: <RCTLayoutAnimation: 0x282629880; 持续时间：0.100000；延迟：0.000000；属性：不透明度；弹簧阻尼：0.000000；初始速度：0.000000；动画类型：4；>；更新布局动画：<RCTLayoutAnimation：0x2826298c0；持续时间：0.100000；延迟：0.000000；属性：（空）；弹簧阻尼：0.000000；初始速度：0.000000；动画类型：4；>；删除布局动画：（空）>。

每次我的列表顺序发生变化时，我都试图让我的平面列表动画。为此，我尝试使用来自 react native 的 LayoutAnimation API。我的状态通过 redux 更新。当我在列表中删除或添加新项目时，它完全可以正常工作，但当我尝试更改所有项目中的 sortOrder 时却不行。

代码

当我完成锻炼时。我记录了从我的 API 返回给我重新排序的新的锻炼列表的锻炼。

日志锻炼

尝试

• 我将每个项目的 sortOrder 作为项目的键。
• Flatlist 的 KeyExtractor 也使用了项目的 sortOrder。
• 我的 LayoutAnimation 在我的状态更新之前执行。
• 我也尝试过使用来自 react reanimated 的 Transitions
• 还添加了以下代码以使其适用于android

我真的不知道还能尝试什么。如果您需要一些代码或更多信息，请告诉我。

有人给我小费吗？我真的不明白为什么它不起作用。

没人知道吗？我仍然无法解决问题。

我有一个带有变换和绝对位置的视图，我想将视图位置设置为它的变换，然后激活一个 layoutAnimation。

意思是，我想设置一个view位置为X，位置设置好后，配置一个layoutAnimation，将它的位置设置为Y。

调用时想要的行为someFunc是视图将其位置设置为其变换并重置其变换（这纯粹是技术性的，没有视觉效果），然后启动动画

我怀疑这没有发生的原因是因为动画仅在渲染时触发，并且由于我连续两次更改状态，因此这两次更改都发生在render调用之前，并且位置仅更新一次。

解决我的问题的另一种方法是离开转换，并将屏幕移动到(wantedPosition - currentTransform)，但这看起来很难看，如果有更干净更优雅的方式来处理这种情况，我正在徘徊

我做所有这些都是为了实现一个可滑动的视图，我宁愿不使用额外的库或依赖项

一些我试过的员工

• 在第一个 setState 的回调中调用第二个 set state 和动画配置，相同的行为

• didAnimationFinish添加两个 LayoutAnimatiom，将第一个动画设置为“即时”（延迟为 0），并在第一个 setState 之后调用它，并在回调中使用第二个 setState 调用第二个。这个接近工作了，但问题是第一个动画不是即时的，你不能设置延迟为 0，当设置延迟为 1 时，你可以看到位置为 0 的视图和一帧的变换 0，之后第一个动画完成在第二个动画开始之前有一个小的延迟。尽管我相信有一种方法可以消除第二个动画之前的小延迟，但你仍然会有一个“错误”的帧