React Native：Lottie和Expo入门

在本教程中，我们将使用Lottie和React Native。 Lottie是一个开源库，通过提供易于使用的动画（如静态图像）来渲染Adobe Effects。 这些动画很漂亮。 Lottie是由AirBnB开发的移动图书馆。 这些动画使用Bodymovin导出为JSON文件，以在移动设备和Web应用程序中本地渲染。

👍适用于花费大量时间为LottieFiles做出贡献的设计师。

要求

为了简洁起见，我将使用Expo XDE并快速上手。 使用它创建一个新项目。 我要打电话给rn-lottie-example但是你可以随便叫什么。

XDE完成运行ReactNative Package Manager的运行并构建项目后，您可以转到右侧的Device下拉菜单，然后根据所使用的操作系统，单击安装的任何模拟器。 Windows用户请确保您已安装android studio和必需的文件，而MacOS用户请确保已安装XCode或最新。

您也可以通过在移动设备上使用Expo Client运行该应用程序来查看该应用程序。 请注意，根据您的Internet连接，这可能会很慢，并且您的移动设备和开发设备必须位于同一wifi上。 扫描“ Share部分中的QR码，即可开始使用。 呈现应用程序后，默认屏幕将欢迎您：

现在，打开您喜欢的文本编辑器/ IDE，因为我们将在下一部分中开始编写代码。

入门

将Lottie作为依赖项安装在项目中可能有些棘手，但幸运的是，Expo为此提供了支持。 由于我们正在使用Expo，因此无需安装任何软件。 我们直接将依赖项导入App.js ：

世博项目中的Sine Lottie处于Alpha模式，不用担心DangerZone一词。

在我们的应用程序中包括一个名为animation的局部状态。 我们将在播放和重新启动动画本身时调用此帮助。 我正在从LottieFiles.com的动画中使用此文件 ，因此您可以下载它。 当然，您可以自由选择其他任何东西。 网站上列出的动画是开源的。

稍后，我们将使用state.animation来获取直接从Lottie组件中获取的动画文件。

定义动画

我们将定义两个自定义函数： _playAnimation和_loadAnimationAsync ，它们执行动画并使用fetch _loadAnimationAsync API从Internet加载动画。 我们还将使用React核心可用的componentWillMount()方法来预先安装动画。 在此生命周期方法中，设置状态后，可以在初始渲染之前调用它。

通常，它用于准备第一个渲染或在渲染之前更新状态。 这就是我们使用它的原因。 我们需要更新定义的状态。

在_loadAnimationAsync()内部，我们使用JavaScript的fetch _loadAnimationAsync() API从其源中获取动画。 这确实意味着该动画来自互联网，因此，如果您在移动设备上进行测试，请确保可以访问互联网。

我们的渲染函数如下所示：

我们分别为整个容器和动画定义样式。 要加载动画，我们将其backgroundColor设置为transparent ，以删除默认情况下具有的任何背景色。

您可以看到该应用程序正在运行

本教程说明了如何使用React Native和Expo来开始使用Lottie动画库。 还有其他定义动画的方法，您可以根据需要进行深入的研究。 本文是针对初学者的观点而写的。

对于Lottie的替代方案，您可以检查Facebook的关键帧 ，该关键帧也使用Adobe After Effects创建一个。

我们的演示应用程序的完整代码：

您也可以在此Github存储库中找到完整的代码，以防您只想尝试一下这个概念。

你可以在Twitter上找到我

From: https://hackernoon.com/react-native-getting-started-with-lottie-and-expo-8b2105fbb496