by Vikrant Negi

通过Vikrant Negi

如何在React Native中创建精美的动画加载器 (How to create a beautifully animated loader in React Native)

使用Airbnb的Lottie库来使您的装载机更具吸引力 。 (Use Airbnb’s Lottie library to jazz up your loaders.)

A loader in Web or Mobile is an essential design element usually used when we need to perform some asynchronous task like data processing or fetching. Since these tasks may take some time and users must be entertained during this time, this is where loaders come in handy.

Web或Mobile中的加载程序是必不可少的设计元素，通常在我们需要执行一些异步任务(如数据处理或获取)时使用。 由于这些任务可能要花费一些时间，并且在此期间必须招待用户，因此这是装载机的方便之处。

Loaders help developers keep the user engaged while they wait and avoid any lack of responsiveness in the app. ?

加载程序可帮助开发人员在等待时让用户参与其中，并避免应用程序中缺少任何响应。 ？

Don’t want to wait? Check out the npm package React-Native-Animated-Loader.

不想等吗？ 签出npm包React-Native-Animated-Loader 。

入门 (Getting Started)

React Native has an ActivityIndicator built in which can be used as a loading indicator.

React Native有一个内置的ActivityIndicator ，可以用作加载指示器。

But for Loaders we can’t just use ActivityIndicator as we want to prevent the user from performing any action until the task is complete. And for this, we’ll use Modals.

但是对于Loaders我们不能仅使用ActivityIndicator因为我们要阻止用户在任务完成之前执行任何操作。 为此，我们将使用Modals 。

If you just want a plain, simple loader, then check out this tutorial.

如果您只想要一个简单的简单加载程序，请查看本教程。

But if you want some awesomeness ? sprinkled into your loaders, continue with the tutorial. ?

但是，如果您想要一些很棒的东西？ 撒到您的装载机中，继续学习本教程。 ？

Airbnb的Lottie？ (Airbnb’s Lottie ?)

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Lottie是一个iOS，Android和React Native库，可实时渲染After Effects动画，从而使应用程序可以像使用静态图像一样轻松地使用动画。

We are going to use its React Native wrapper library lottie-react-native for our custom loader animation.

我们将使用其React Native包装器库lottie-react-native作为自定义加载器动画。

创建一个应用 (Create an App)

We are going to use react-native-cli to create a React Native project, but you can use Expo as well.

我们将使用react-native-cli创建一个React Native项目，但是您也可以使用Expo。

Create an example project with the following command:

使用以下命令创建示例项目：

~ react-native init LoaderExample

安装依赖项 (Install Dependencies)

Now let’s add the necessary packages. First Install react-native-animated-loader and lottie-react-native.

现在让我们添加必要的包。 首先安装react-native-animated-loader和lottie-react-native 。

~ npm install react-native-animated-loader --save

~ npm i --save lottie-react-native

If you are using Expo you don’t need to install Lottie.

如果您正在使用Expo，则不需要安装Lottie。

Since lottie-react-native requires native linking, run the following commands:

由于lottie-react-native需要本地链接，因此请运行以下命令：

~ react-native link lottie-ios

~ react-native link lottie-react-native

After this, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries.

之后，打开Xcode项目配置，然后将Lottie.framework添加为Embedded Binaries 。

If you face any error after linking Lottie, following the detailed installation instructions here.

如果在链接Lottie之后遇到任何错误，请遵循此处的详细安装说明。

让我们添加魔术？ (Let’s add magic ?)

Now update your App.js with the following code:

现在，使用以下代码更新App.js ：

import React, { Component } from 'react';import { StyleSheet, View, Button } from 'react-native';import AnimatedLoader from 'react-native-animated-loader';

export default class App extends Component<Props> {  constructor(props) {    super(props);    this.state = { visible: false };  }

handlePress = () => {    setTimeout(() => {      this.setState({         visible: !this.state.visible,      });    }, 1000);  };

render() {    const { visible } = this.state;

return (      <View style={styles.container}>        <AnimatedLoader          visible={visible}          overlayColor="rgba(255,255,255,0.75)"          animationStyle={styles.lottie}          speed={1}        />        &lt;Button title="press" onPress={this.handlePress} />      </View>    );  }}

const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  lottie: {    width: 100,    height: 100,  },});

When you click you should the following animation within a few seconds.

单击时，应在几秒钟内显示以下动画。

自定义动画 (Customize Animation)

The animation you see is the default, but you can add your own Lottie animation. If you want to find some cool loader animations, go to lottiefiles, where you can find some pre-built loader animations. Just choose the one you like and download its JSON file.

您看到的动画是默认动画，但是您可以添加自己的Lottie动画。 如果要查找一些很酷的加载器动画，请转到lottiefiles ，在其中可以找到一些预构建的加载器动画。 只需选择您喜欢的一个，然后下载其JSON文件即可。

Now add the downloaded JSON file to the LoaderExample project and add source prop to the AnimatedLoader. After adding the source it should look like this:

现在，将下载的JSON文件添加到LoaderExample项目中，并将源prop添加到AnimatedLoader 。 添加源之后，它应如下所示：

<AnimatedLoader  visible={visible}  overlayColor="rgba(255,255,255,0.75)"  animationStyle={styles.lottie}  speed={1}  source={require("./path-of-your-json-file.json")} // Add here/>

You can also customize the loader styles by adding animationStyle prop.

您还可以通过添加animationStyle属性来自定义加载器样式。

用法 (Usage)

In our example, I’ve used setTimeout to mimic an Asynchronous task. In the real world, you would be using it for all sorts of asynchronous tasks like fetching data from an API.

在我们的示例中，我使用了setTimeout来模拟一个异步任务。 在现实世界中，您将使用它执行各种异步任务，例如从API提取数据。

结论 (Conclusion)

Now you know how to make a cool animated loader, I hope you’ll stop using the old, boring activity indicator for your loaders.

现在，您知道了如何制作出色的动画加载器，希望您不要再对加载器使用旧的，无聊的活动指示器。

Find the library repo here.

在此处找到图书馆回购。

If you like this article, go ahead and show some love with your claps.

如果您喜欢本文，请继续鼓掌并表示爱意。

Check out my other articles on React Native:

查看我在React Native上的其他文章：

• React Native FlatList with realtime searching ability

  具有实时搜索功能的Ract Native FlatList

• React Native Location Tracking

  React本机位置跟踪

• React Native charts with dynamic tooltips

  使用动态工具提示来响应本机图表

翻译自: https://www.freecodecamp.org/news/how-to-create-a-beautifully-animated-loader-in-react-native-21da37a8f6b0/