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

2024-05-21 • 问答

LayoutAnimation是React Native的一部分，可在呈现视图时自动为组件设置动画。

官方文档在这里：

但是，文档中的示例不起作用。示例中本应进行动画处理的对象只是从开始位置跳到结束位置。

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

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

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

更新：LayoutAnimation可能不支持Web。是否有人对此有任何了解，或可以向读者介绍文档中的解释？

当前，react-native-web中不正确支持

在iOS / Android上则完全不同。如果我们在这里查看：https://reactnative.dev/docs/layoutanimation/，则实际上可以通过按Play并选择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，该API更快，更现代，但仍处于alpha状态（我正在谈论当前的v2版本）。

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

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

对于这种Web情况，您应该将Web组件解耦并制作一个单独的文件，然后在其上编写所需的动画。