Sådan oprettes en smukt animeret læsser i React Native

Brug Airbnbs Lottie-bibliotek til at jazz op dine læssere.

En loader i Web eller Mobile er et vigtigt designelement, der normalt bruges, når vi har brug for at udføre en asynkron opgave som databehandling eller hentning. Da disse opgaver kan tage noget tid, og brugerne skal underholdes i løbet af denne tid, er det her, hvor læssere er nyttige.

Loaders hjælper udviklere med at holde brugeren engageret, mens de venter, og undgår manglende respons i appen. ?

Vil du ikke vente? Tjek npm-pakken React-Native-Animated-Loader.

Kom godt i gang

React Native har en ActivityIndicatorindbygget, som kan bruges som en belastningsindikator.

Men for Loadersvi kan ikke bare bruge, ActivityIndicatorsom vi vil forhindre brugeren i at udføre nogen handling, indtil opgaven er afsluttet. Og til dette bruger vi Modals.

Hvis du bare vil have en almindelig, enkel læsser, så tjek denne vejledning.

Men hvis du vil have noget fantastisk? drysset i dine læssere, fortsæt med vejledningen. ?

Airbnbs Lottie?

Lottie er et iOS-, Android- og React Native-bibliotek, der gengiver After Effects-animationer i realtid, så apps kan bruge animationer så let som de bruger statiske billeder.

Vi skal bruge dets React Native wrapper-bibliotek lottie-react-native til vores brugerdefinerede loader-animation.

Opret en app

Vi skal bruge react-native-clitil at oprette et React Native-projekt, men du kan også bruge Expo.

Opret et eksempel på et projekt med følgende kommando:

~ react-native init LoaderExample

Installer afhængigheder

Lad os nu tilføje de nødvendige pakker. Første installation react-native-animated-loaderog lottie-react-native.

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

~ npm i --save lottie-react-native

Hvis du bruger Expo, behøver du ikke installere Lottie.

Da lottie-react-nativekræver native linking, skal du køre følgende kommandoer:

~ react-native link lottie-ios

~ react-native link lottie-react-native

Herefter skal du åbne Xcode-projektkonfigurationen og tilføje Lottie.frameworkas Embedded Binaries.

Hvis du står over for en fejl efter sammenkædning af Lottie, skal du følge de detaljerede installationsinstruktioner her.

Lad os tilføje magi?

Opdater nu din App.jsmed følgende kode:

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 { constructor(props) { super(props); this.state = { visible: false }; }

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

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

 return (     ); }}

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

Når du klikker, skal følgende animation ske inden for få sekunder.

Tilpas animation

Den animation, du ser, er standard, men du kan tilføje din egen Lottie-animation. Hvis du vil finde nogle seje loader-animationer, skal du gå til lottiefiles, hvor du kan finde nogle forudbyggede loader-animationer. Vælg den, du kan lide, og download dens JSON-fil.

Tilføj nu den downloadede JSON-fil til LoaderExampleprojektet, og tilføj kildestøtte til AnimatedLoader. Efter tilføjelse af kilden skal det se sådan ud:

Du kan også tilpasse læsserstilene ved at tilføje animationStyleprop.

Anvendelse

I vores eksempel har jeg brugt setTimeouttil at efterligne en asynkron opgave. I den virkelige verden bruger du det til alle mulige asynkrone opgaver som at hente data fra en API.

Konklusion

Nu ved du, hvordan man laver en cool animeret læsser, jeg håber, du stopper med at bruge den gamle, kedelige aktivitetsindikator til dine læssere.

Find bibliotekets repo her.

Hvis du kan lide denne artikel, skal du fortsætte og vise lidt kærlighed med dine klapper.

Tjek mine andre artikler om React Native:

• Reager Native FlatList med evne til at søge i realtid
• Reager indfødt placeringssporing
• Reager indfødte diagrammer med dynamiske værktøjstip