数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学在React Native应用中添加动画加载器和启动画面
在这篇文章中，我们将学习如何在React Native应用中实现Lottie动画。Lottie是一个开源动画文件格式，它体积小、质量高、交互性强，并且可以在运行时进行操作。Lottie动画主要用于加载画面或启动画面。
那么，让我们将Lottie动画添加到我们的React Native移动应用程序中。
示例
访问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动画的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文件的路径来实现该动画。
输出
执行后，将产生以下输出：
更新于：2021年9月29日
497 次浏览
广告