Hogyan hozzunk létre egy gyönyörűen animált betöltőt a React Native alkalmazásban

Használja az Airbnb Lottie könyvtárát a rakodók feldobásához.

A webes vagy mobilos betöltő elengedhetetlen tervezési elem, amelyet általában akkor használnak, amikor aszinkron feladatokat kell végrehajtanunk, például adatfeldolgozást vagy beolvasást. Mivel ezek a feladatok eltarthatnak egy ideig, és a felhasználóknak szórakozást kell nyújtaniuk ez idő alatt, akkor a rakodók itt hasznosak.

A rakodók segítenek a fejlesztőknek elkötelezni a felhasználót, amíg várakoznak, és elkerülik a válasz hiányát az alkalmazásban. ?

Nem akarsz várni? Nézze meg az React-Native-Animated-Loader npm csomagot.

Elkezdeni

A React Native ActivityIndicatorbeépített, amely terhelésjelzőként használható.

De Loadersnem csak használhatjuk ActivityIndicator, hanem meg akarjuk akadályozni, hogy a felhasználó bármilyen műveletet hajtson végre a feladat befejezéséig. Ehhez pedig használni fogjuk Modals.

Ha csak sima, egyszerű betöltőt szeretne, akkor nézze meg ezt az oktatóanyagot.

De ha valami félelmességre vágysz? szórva a rakodóiba, folytassa az oktatóanyaggal. ?

Az Airbnb Lottie-ja?

A Lottie egy iOS, Android és React Native könyvtár, amely valós időben rendereli az After Effects animációkat, lehetővé téve az alkalmazások számára, hogy az animációkat ugyanolyan egyszerűen használják, mint a statikus képeket.

A React Native csomagoló könyvtár lottie-react-native-jét egyedi betöltő animációnkhoz fogjuk használni.

Hozzon létre egy alkalmazást

A react-native-cliReact Native projekt létrehozására fogunk felhasználni , de használhatja az Expo-t is.

Hozzon létre egy példa projektet a következő paranccsal:

~ react-native init LoaderExample

Telepítse a függőségeket

Most tegyük hozzá a szükséges csomagokat. Először telepítse react-native-animated-loaderés lottie-react-native.

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

~ npm i --save lottie-react-native

Ha Expo-t használ, akkor nem kell telepítenie a Lottie-t.

Mivel lottie-react-nativenatív összekapcsolást igényel, futtassa a következő parancsokat:

~ react-native link lottie-ios

~ react-native link lottie-react-native

Ezt követően nyissa meg az Xcode projekt konfigurációját, és adja hozzá az Lottie.frameworkas nevet Embedded Binaries.

Ha hibát tapasztal a Lottie összekapcsolása után, kövesse az itt található részletes telepítési utasításokat.

Adjunk hozzá varázslatot?

Most frissítse App.jsa következő kóddal:

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

Ha rákattint, néhány másodpercen belül meg kell tennie a következő animációt.

Az animáció testreszabása

A látott animáció az alapértelmezett, de felveheti saját Lottie-animációját. Ha remek betöltő-animációkat szeretne találni, látogasson el a lottiefiles oldalra, ahol megtalálhat néhány előre elkészített betöltő-animációt. Csak válassza ki azt, amelyik tetszik, és töltse le a JSON fájlt.

Most adja hozzá a letöltött JSON fájlt a LoaderExampleprojekthez, és adjon hozzá forrás-javaslatot a AnimatedLoader. A forrás hozzáadása után így kell kinéznie:

A betöltő stílusokat testreszabhatja animationStyleprop hozzáadásával is .

Használat

Példánkban setTimeoutaszinkron feladatot szoktam utánozni. A való világban mindenféle aszinkron feladathoz használná, például adatok lehívásához egy API-ból.

Következtetés

Most már tudja, hogyan készítsen klassz animációs rakodót, remélem, abbahagyja a régi, unalmas aktivitásjelzőt a rakodóihoz.

Itt találhatja meg a könyvtári repót.

Ha tetszik ez a cikk, folytassa és mutasson némi szeretetet a tapsokkal.

Nézze meg a React Native többi cikkét:

• Reagáljon a natív FlatListre valós idejű keresési képességgel
• Reagáljon a natív helykövetésre
• Reagáljon a natív diagramokra dinamikus eszköztippekkel