LayoutAnimation 在任何情况下都有效吗?
Does LayoutAnimation Work Under Any Circumstances?
LayoutAnimation 是 React Native 的一部分,它会在呈现视图时自动为组件设置动画。
官方文档在这里:
https://reactnative.dev/docs/layoutanimation
但是,文档中的示例不起作用。示例中应该设置动画的对象只是从起始位置跳到结束位置。
这里是文档中似乎没有动画的 Snacks 之一的示例:
https://snack.expo.io/91MUQd5IH
这会让人得出这样的结论,即这个 API 只是不受支持或不再起作用。
是不是Layout Animation就是不行?或者,如果它在某些情况下确实有效,请分享一个 link,其中包含一个有效的 Snack / Gist 以及一个非常简单但有效的 LayoutAnimation 示例。
更新:LayoutAnimation 可能不支持 web.有没有人对此有任何了解,或者谁可以参考 reader 文档中的解释?
react-native-web 当前不正确支持布局动画。你可以在这里看到:https://github.com/necolas/react-native-web#modules and here 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 我们也有支持,但可能 work/crash 没有。如果您查看 react-native 的未决问题,您会发现其中很多都提到了 LayoutAnimation 和 Android 的问题。例如。它在 Android 的特定条件下崩溃:https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.
我不建议使用 LayoutAnimation,尤其是在 Android 上,因为它是高度实验性的,可能会在某些设备上崩溃而没有警告。
如果你想尝试一些更有趣且性能更好的动画,我建议你尝试使用 ReactNative 的 Animated API 或更新的 react-native-reanimated,它更快、更现代但仍处于 alpha 阶段(我说的是当前 v2 版本)。
根据我的测试,问题 post 中给定的 link 工作正常:
另外,我在我朋友的 iPhone 上测试过它,它也能正常工作。但许多 React Native 功能在 Web 导出时无法正常工作。例如,RNW (React Native Web) 上的动画适用于 Android/iOS 导出,但不适用于 Web 导出。
对于这种 web 情况,你应该解耦 web 组件并制作一个单独的文件,然后在上面编写所需的动画。
LayoutAnimation 是 React Native 的一部分,它会在呈现视图时自动为组件设置动画。
官方文档在这里:
https://reactnative.dev/docs/layoutanimation
但是,文档中的示例不起作用。示例中应该设置动画的对象只是从起始位置跳到结束位置。
这里是文档中似乎没有动画的 Snacks 之一的示例:
https://snack.expo.io/91MUQd5IH
这会让人得出这样的结论,即这个 API 只是不受支持或不再起作用。
是不是Layout Animation就是不行?或者,如果它在某些情况下确实有效,请分享一个 link,其中包含一个有效的 Snack / Gist 以及一个非常简单但有效的 LayoutAnimation 示例。
更新:LayoutAnimation 可能不支持 web.有没有人对此有任何了解,或者谁可以参考 reader 文档中的解释?
react-native-web 当前不正确支持布局动画。你可以在这里看到:https://github.com/necolas/react-native-web#modules and here 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 我们也有支持,但可能 work/crash 没有。如果您查看 react-native 的未决问题,您会发现其中很多都提到了 LayoutAnimation 和 Android 的问题。例如。它在 Android 的特定条件下崩溃:https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.
我不建议使用 LayoutAnimation,尤其是在 Android 上,因为它是高度实验性的,可能会在某些设备上崩溃而没有警告。
如果你想尝试一些更有趣且性能更好的动画,我建议你尝试使用 ReactNative 的 Animated API 或更新的 react-native-reanimated,它更快、更现代但仍处于 alpha 阶段(我说的是当前 v2 版本)。
根据我的测试,问题 post 中给定的 link 工作正常:
另外,我在我朋友的 iPhone 上测试过它,它也能正常工作。但许多 React Native 功能在 Web 导出时无法正常工作。例如,RNW (React Native Web) 上的动画适用于 Android/iOS 导出,但不适用于 Web 导出。
对于这种 web 情况,你应该解耦 web 组件并制作一个单独的文件,然后在上面编写所需的动画。