LayoutAnimation 在任何情况下都可以工作吗？

Posted 2023-03-15

【中文标题】LayoutAnimation 在任何情况下都可以工作吗？

【英文标题】：Does LayoutAnimation Work Under Any Circumstances?

【发布时间】：2020-10-20 18:14:08

【问题描述】：

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

官方文档在这里：

https://reactnative.dev/docs/layoutanimation

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

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

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

这会让人得出这样的结论：这个 API 只是不受支持或不再起作用。

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

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

【问题讨论】：

是的，但我相信它只是 ios，可能在 android 上是实验性的，但对于 React Native for Web 来说不是。

您能分享一下您尝试过的代码以及您尝试过的平台吗？

@zero298 感谢您分享这个关键细节，我会将其添加到问题的正文中。有这个来源还是我们只是在谈论常识？

@zero298 这是来自文档 snack.expo.io/…

的示例

是的，这在 React Native Web 中有点令人困惑。这是最新一期：github.com/necolas/react-native-web/issues/1613 关于 Android 的部分来自您链接的文档的第一段以及个人经验。

【参考方案1】：

LayoutAnimation 目前在 react-native-web 中不被正确支持。你可以在这里看到：https://github.com/necolas/react-native-web#modules 和这里 https://github.com/necolas/react-native-web/issues/1613、https://github.com/necolas/react-native-web/issues/1056。目前它似乎不是该项目的优先事项，所以我不指望它会被实施。

在 iOS/Android 上，情况就不同了。如果我们看这里：https://reactnative.dev/docs/layoutanimation/，您实际上可以通过按播放并选择 iOS 来看到它正常工作。

在 Android 上我们也有支持，但它可能无法工作/崩溃。如果您查看针对 react-native 的问题，您会发现其中很多都提到了 LayoutAnimation 和 Android 的问题。例如。它在 Android 上的某些条件下崩溃：https://github.com/facebook/react-native/issues/27552 和 https://github.com/facebook/react-native/issues/29919。

我不建议使用 LayoutAnimation，尤其是在 Android 上，因为它是高度实验性的，并且可能会在某些设备上崩溃而不会发出警告。

如果你想尝试一些更有趣、性能更好的动画，我建议你尝试使用来自 ReactNative 的 Animated API 或更新的 react-native-reanimated，它更快、更现代但仍处于 alpha 阶段（我说的是当前, v2, 版本）。

【讨论】：

这是一个很好的答案，很抱歉赏金在我奖励给你之前就过期了

没问题@CodeWhisperer。如果您认为合适，您仍然可以将其标记为答案。很高兴我能帮忙:)

【参考方案2】：

通过我的测试，问题帖子中的给定链接可以正常工作：

另外，我在我朋友的 iPhone 上进行了测试，它也可以正常工作。但是许多 React Native 功能在 Web 导出时无法正常工作。例如，RNW（React Native Web）上的动画适用于 Android/iOS 导出，但不适用于 Web 导出。

对于这样的web场景，你应该解耦web组件，制作一个单独的文件，然后在上面写上想要的动画。