在 React Native 应用程序中添加动画加载器和启动屏幕

在本文中，我们将了解如何在 React Native 应用程序中实现 Lottie 动画。Lottie 是一种开源动画文件格式，它体积小、质量高、可交互，并且可以在运行时进行操作。Lottie 动画主要用于加载屏幕或作为开始屏幕。

所以，让我们为我们的 React Native 移动应用添加一个 Lottie 动画。

示例

前往 Lottie 动画官方网站，下载 Lottie JSON。

链接到我将要使用的动画 -

https://lottiefiles.com/74546-character-02#/

将 JSON 文件命名为“myloader.json”并将其与App.js保持在同一级别。

现在安装lottie-react-native包

npm i --save lottie-react-native

Lottie 库将用于将 lottie-animation 的 JSON 文件添加到您的 React Native 应用程序中。

要添加下载的动画，首先从lottie-react-native导入LottieView。

接下来，在App.js中插入以下代码行-

import React from 'react';
import LottieView from 'lottie-react-native';

const App = () => {
   return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
         <LottieView source={require('./myloader.json')} autoPlay loop/>
      </View>
   );
}

export default App;

在LottieView 的 source 属性中，您需要提供下载的 lottie JSON 文件的 JSON 路径以实现该动画。

输出结果

在执行时，它将产生以下输出 -