Construeix una barra de progrés amb React Native

Bloc

Construeix una barra de progrés amb React Native

Construeix una barra de progrés amb React Native

Una barra de progrés (de vegades anomenada indicador de progrés) és un indicador visual o representació del progrés d’una tasca concreta. Pot ser una operació com ara descàrrega, transferència / càrrega de fitxers, instal·lació, execució del programa o fins i tot passos completats en la configuració del perfil.
Aquest és el títol de la imatge

El programari amb bona UX permet a l’usuari saber si hi ha un procés en execució, el temps d’execució previst i la part finalitzada del treball.

Les barres de progrés poden ser determinades o indeterminades. Determinat s’utilitzen barres de progrés quan es pot saber què s’ha fet i què queda per completar. Indeterminat les barres de progrés, en canvi, s’utilitzen quan aquestes mètriques no es poden determinar immediatament.
Aquest és el títol de la imatge

En aquest article, veurem com crear una barra de progrés per a React Native. Podeu preguntar-vos per què voleu crear-ne un, al cap i a la fi, hi ha alguns paquets React Native per a barres de progrés, com ara reacciona-nativa-barra-de-progrés-animada i react-native-progress . En última instància, probablement es reduirà a les preferències personals i crearà alguna cosa que pugueu ajustar per satisfer les vostres necessitats.

React Native té un component de la barra de progrés ProgressBarAndroid que només està disponible per a Android. Si voleu que la vostra aplicació per a iOS tingui una barra de progrés, haureu d’utilitzar un paquet npm existent o crear-ne un.

problemes de dipòsit directe d'aplicacions en efectiu

Començant

Aquest article suposa que coneixeu React Native o, com a mínim, React. També caldrà una comprensió de React Hooks. Per començar, primer haurem de començar un projecte. Podeu utilitzar Expo CLI o React Native CLI per arrencar el vostre projecte. Als efectes d’aquest article, faré servir Snack que us permet provar React Native directament al navegador web. Si aneu a Snack, veureu una visualització similar a aquesta:
Aquest és el títol de la imatge

convertir a float js

Farem els nostres canvis al fitxer App.js. Aclarim el que ja hi tenim per començar. Afegiu el codi següent a App.js:

import React, { useEffect, useState, useRef } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import Constants from 'expo-constants'; const App = () => { return ( We Will Start Here ); } export default App; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', padding: 8, }, });

Estem representant una visualització amb text. El simulador de dispositiu s'hauria d'actualitzar automàticament.

Construint la barra de progrés

Abans de començar a construir la barra de progrés, hem de determinar com serà i què hem de mostrar. Una simple barra de progrés tindrà algun text descriptiu, per exemple, carregant, i la barra real que representa el progrés de l'operació. També afegirem un text que mostri quin percentatge de l'operació s'ha completat. Creem l'esquelet de la barra de progrés. Al nostre App.js, canviarem el text del nostre component de text a Carregant ...:

Loading.....

Volem que el text Loading..... estigui a sobre de la barra de progrés i el percentatge de finalització a sota de la barra. Haurem de canviar l'estil del contenidor per alinear els components secundaris en una columna. Afegim un flexDirection: 'Column' propietat dels nostres estils de contenidors. A sota, tindrem una vista buida amb una alçada de 20 píxels, un 100% d’amplada, un fons blanc i una vora negra de 2 píxels de gruix. Podeu afegir aquests estils a un nou objecte d'estils anomenat progressBar.

Loading..... const styles = StyleSheet.create({ container: {....}, progressBar: { height: 20, width: '100%', backgroundColor: 'white', borderColor: '#000', borderWidth: 2, borderRadius: 5 } });

Per mostrar el progrés actual de l'execució de la tasca, afegirem un camp de text amb el percentatge de finalització a sota de la barra de progrés. El podem codificar en un 50% per ara.

Loading..... 50%

A continuació s’explica la nostra barra de progrés:
Aquest és el títol de la imatge

Ara podem començar a treballar a la barra de progrés real. Haurem d’afegir una vista infantil al contenidor Vista de la barra de progrés. La visualització infantil mostrarà el percentatge de progrés. Com que la vista infantil haurà d’estar alineada al llarg del pla horitzontal, el contenidor de la barra de progrés necessitarà la propietat d’estil flexDirection:'Row'. Afegiu aquesta propietat a progressBar estils. Finalment voldrem animar la barra, de manera que farem servir una visualització animada.

La nostra visualització animada utilitzarà StyleSheet.absoluteFill per crear una superposició amb posicionament absolut i zero.

{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }

També haurem de donar a la vista un color d’ompliment. Podeu escollir el color que vulgueu. He optat per utilitzar una tonalitat de verd. També donem a la visualització un ample del 50%.

reaccioneu a la taula bootstrap següent

La nostra aplicació ara hauria de tenir aquest aspecte:
Aquest és el títol de la imatge

Afegint el comptador de progrés

Perquè la nostra barra de progrés mostri que ha finalitzat canviant, necessitarem un comptador. La forma més senzilla de fer-ho és mitjançant setInterval. Tot i això, estic fent servir Hooks i setInterval no es comporta com s’esperava. Per superar aquest obstacle, utilitzarem un fantàstic ganxo personalitzat creat per Dan Abramov. Podeu trobar al seu bloc aquí . Anem a copiar aquest ganxo personalitzat i afegir-lo al nostre fitxer App.js:

function useInterval(callback, delay) { const savedCallback = useRef(); // Remember the latest callback. useEffect(() => { savedCallback.current = callback; }, [callback]); // Set up the interval. useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); }

Ara que tenim aquest ganxo, el podem seguir fent servir. Haurem de tenir un valor d’estat de progrés i actualitzar-lo mitjançant el ganxo personalitzat. Afegiu el codi següent al vostre component:

com veure els tuits protegits sense seguir el 2019
const [progress, setProgress] = useState(0); useInterval(() => { if(progress <100) { setProgress(progress + 5); } }, 1000);

Estem fent servir el | | + _ | personalitzat Hook per actualitzar el valor del progrés de 0 a 100 en increments de 5 cada 1 segon.

Animació de la barra de progrés

El primer que haurem de fer és crear el nostre valor animat. Per aconseguir-ho, utilitzarem useRef Ganxo. Afegim el nostre valor animat al component:

setInterval

Quan canviï el nostre valor de progrés, haurem de generar actualitzacions mitjançant animacions mitjançant const App = () => { let animation = useRef(new Animated.Value(0)); ..... } . Això prendrà el valor actual de la referència de l'animació, així com un objecte de configuració que contindrà el valor nou a animar i la durada de l'animació. A continuació, l’animació s’activarà mitjançant la trucada start. Utilitzarem Animated.timing() amb valor de progrés com a dependència per actualitzar animacions. En codi, això tindrà un aspecte semblant a això:

useEffect

A continuació, haurem d’establir una amplada per a la barra de progrés. Ho farem creant un valor interpolat a partir de l'animació.

useEffect(() => { Animated.timing(animation.current, { toValue: progress, duration: 100 }).start(); },[progress])

El valor const width = animation.current.interpolate({ inputRange: [0, 100], outputRange: ['0%', '100%'], extrapolate: 'clamp' }) representa l'interval de valors que rebrem del progrés. El inputRange defineix l'interval de valors que es generaran. Una interpolació assigna els intervals d’entrada als intervals de sortida normalment mitjançant una interpolació lineal. Per defecte, extrapolarà la corba més enllà dels intervals indicats. Per assegurar-nos que els valors de sortida no superin l'interval proporcionat, passem una propietat extrapolada: outputRange a l'objecte de configuració. Ara passem l'amplada interpolada a la barra de progrés animada.

'clamp'

El percentatge de valor de progrés que hem codificat abans anteriorment haurà de coincidir amb la barra de progrés d’actualització. Com que els nostres valors oscil·len entre 0 i 100, construirem el text mitjançant una cadena de plantilla.

net 6 preview 2

I aquí ho tenim. La nostra barra de progrés s'ha completat. Es pot trobar el producte final aquí.

Conclusió

Podeu trobar l’aperitiu d’aquest projecte aquí . També podeu trobar el codi d’aquest projecte a GitHub . Això no és en cap cas una barra de progrés perfecta. Hi ha moltes millores que s’hi poden fer sobretot pel que fa a l’animació. Per desafiar-vos més, podeu provar de penjar un fitxer i mostrar el progrés.

#react #javascript