de Vikrant Negi

Cum să creați un încărcător frumos animat în React Native

Folosiți Airbnb’s Lottie bibliotecă pentru a vă încărca încărcătoarele.

Cum sa creati un incarcator frumos animat in React Native
Lottie Animation for Loaders

Un încărcător în Web sau mobil este un element esențial de proiectare utilizat de obicei atunci când trebuie să efectuăm o sarcină asincronă, cum ar fi prelucrarea sau preluarea datelor. Deoarece aceste sarcini pot dura ceva timp, iar utilizatorii trebuie să se distreze în acest timp, aici sunt utilele încărcătoare.

Încărcătoarele ajută dezvoltatorii să mențină utilizatorul implicat în timp ce așteaptă și să evite orice lipsă de reacție în aplicație. ?

Nu vrei să aștepți? Consultați pachetul npm React-Native-Animated-Loader.

Noțiuni de bază

React Native are un ActivityIndicator construit în care poate fi folosit ca indicator de încărcare.

Dar pentru Loaders nu putem folosi doar ActivityIndicator deoarece vrem să împiedicăm utilizatorul să efectueze orice acțiune până când sarcina este finalizată. Și pentru aceasta, vom folosi Modals.

Dacă doriți doar un încărcător simplu, apoi verificați acest tutorial.

Dar dacă vrei o minune? presărat în încărcătoare, continuați cu tutorialul. ?

Lottie de la Airbnb?

Lottie este o bibliotecă iOS, Android și React Native care redă animații After Effects în timp real, permițând aplicațiilor să utilizeze animații la fel de ușor pe cât folosesc imagini statice.

Vom folosi biblioteca sa de folie React Native lottie-react-native pentru animația noastră de încărcător personalizat.

Creați o aplicație

Vom folosi react-native-cli pentru a crea un proiect React Native, dar puteți utiliza și Expo.

Creați un exemplu de proiect cu următoarea comandă:

~ react-native init LoaderExample

Instalați dependențe

Acum să adăugăm pachetele necesare. Prima instalare react-native-animated-loader și lottie-react-native.

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

Dacă utilizați Expo, nu este necesar să instalați Lottie.

De cand lottie-react-native necesită conectare nativă, executați următoarele comenzi:

~ react-native link lottie-ios
~ react-native link lottie-react-native

După aceasta, deschideți configurația proiectului Xcode și adăugați fișierul Lottie.framework la fel de Embedded Binaries.

Dacă întâmpinați vreo eroare după conectarea Lottie, urmați instrucțiunile detaliate de instalare Aici.

Să adăugăm magie?

Acum actualizați fișierul App.js cu următorul cod:

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,  },});

Când faceți clic, ar trebui să faceți următoarea animație în câteva secunde.

1611994986 559 Cum sa creati un incarcator frumos animat in React Native

Personalizați animația

Animația pe care o vedeți este implicită, dar puteți adăuga propria animație Lottie. Dacă doriți să găsiți câteva animații grozave de încărcare, accesați lottiefiles, unde puteți găsi câteva animații de încărcător pre-construite. Doar alegeți-l pe cel care vă place și descărcați fișierul JSON.

Acum adăugați fișierul JSON descărcat în fișierul LoaderExample proiectează și adaugă sursa prop la AnimatedLoader. După adăugarea sursei ar trebui să arate astfel:

<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/>

De asemenea, puteți personaliza stilurile de încărcare adăugând animationStyle recuzită.

Utilizare

În exemplul nostru, am folosit setTimeout pentru a imita o sarcină asincronă. În lumea reală, l-ați folosi pentru tot felul de sarcini asincrone, cum ar fi preluarea datelor dintr-un API.

Concluzie

Acum știi cum să faci un încărcător animat, sper să nu mai folosești vechiul indicator plictisitor de activitate pentru încărcătoarele tale.

Găsiți repo biblioteca Aici.

Dacă vă place acest articol, continuați și arătați oarecare dragoste cu palme.

Consultați celelalte articole despre React Native: