de Andrea Bizzotto

Gestionarea statului într-o aplicație React Navigation cu Redux

Gestionarea statului intr o aplicatie React Navigation cu
Credit de imagine: Petar Petkovski

În acest tutorial, voi arăta cum să gestionați navigare și starea cererii prin construirea unei aplicații simple cu React Navigation și Redux.

Condiție prealabilă: ar trebui să fiți deja familiarizați cu React Native, React Navigation și Redux. Dacă tocmai începeți cu React Native, vă recomand cu tărie acest curs:

Prezentare generală a aplicației

Vom construi o aplicație formată din două pagini:

Gestionarea statului intr o aplicatie React Navigation cu
  • Pagina principală: Aceasta afișează o vizualizare container cu o anumită culoare de fundal și un buton. Când este apăsat butonul, este prezentată a doua pagină.
  • Alegeți pagina Color: Aceasta afișează butoanele ROȘU, VERDE și ALBASTRU. Când este selectată o culoare, aplicația revine la pagina principală și afișează culoarea de fundal actualizată.

Construind această aplicație, veți învăța:

  • Cum să navigați între diferite ecrane cu React Navigation
  • Cum se utilizează reductoare și acțiuni pentru actualizarea stării aplicației, astfel încât acțiunile pe un ecran se schimbă în interfața de utilizare a interfeței

Cu aceste cunoștințe, veți putea crea aplicații mai complexe.

Notă: Pentru restul acestui tutorial, voi folosi termenii „pagină” și „ecran” pentru a însemna același lucru.

Configurare proiect (Expo)

Vom construi această aplicație cu Expo XDE.

Puteți descărca Expo pentru sistemul dvs. de operare din Pagina Expo XDE GitHub.

Apoi mergeți la instructiuni de instalare pe Documente Expo. Acestea vă vor arăta cum să instalați XDE pe desktop și să rulați aplicații în Expo pe simulator / dispozitiv.

Deoarece vom rula aplicația pe simulator, va trebui să descărcați Xcode sau Android Studio.

La lansarea Expo, această pagină este prezentată:

1611464769 169 Gestionarea statului intr o aplicatie React Navigation cu
  • Selectați „Creați un proiect nou …”
  • Alegeți șablonul gol și denumiți proiectul redux-navigation

Proiectul va fi creat, apoi va începe pachetul React Native.

1611464769 82 Gestionarea statului intr o aplicatie React Navigation cu

Pentru a rula aplicația în simulator, selectați Dispozitiv -> Deschideți în iOS Simulator.

Odată ce simulatorul este pornit, apare următorul ecran:

1611464769 778 Gestionarea statului intr o aplicatie React Navigation cu

Deoarece proiectul este acum creat, acesta poate fi deschis cu editorul ales. eu folosesc Cod Visual Studio cu Extensia React Native Tools.

1611464770 403 Gestionarea statului intr o aplicatie React Navigation cu

Construirea aplicației

Înainte de a putea codifica aplicația noastră, trebuie să instalăm toate dependențele de care are nevoie.

Deschideți un terminal, mutați în folderul de proiect pe care l-ați creat în Expo și tastați:

npm install --save react-navigation redux react-reduxnpm install

Atunci, asigurați-vă că apăsați butonul Reporniți în Expo. Dacă nu faceți acest lucru, noile dependențe nu vor fi recunoscute și simulatorul va arunca un ecran de eroare roșu dacă încercați să le utilizați.

E timpul să ne construim aplicația. Mi-am organizat folderele de proiect astfel:

/src  /actions    ColorChangedAction.js  /components    AppNavigator.js    ChooseColorPage.js    MainPage.js  /reducers    AppReducer.js    ColorReducer.js    NavReducer.js  /state    Colors.js

Puteți replica aceeași structură de la terminal:

cd redux-navigationmkdir src && cd srcmkdir actions && cd actions && touch ColorChangedAction.js && cd ..mkdir components && cd components && touch AppNavigator.js ChooseColorPage.js MainPage.js && cd ..mkdir reducers && cd reducers && touch AppReducer.js ColorReducer.js NavReducer.js && cd ..mkdir state && cd state && touch Colors.js && cd ..

Copiați-lipiți următorul cod în Colors.js fişier:

Apoi, creați fișierul MainPage cu o culoare de fundal implicită și un buton:

Câteva note:

  • MainPage este mai degrabă o componentă React decât un componentă funcțională apatridă, deoarece va trebui să acceseze starea aplicației
  • eu folosesc flex: 1, alignSelf: 'stretch' pentru ca vizualizarea containerului să se extindă pe întregul ecran
  • Culoarea vizualizării containerului este definită în selectedColor() metoda, care eșantionează RED de la noi COLORS tabel și returnează codul hexagonal corespunzător
  • Am adăugat un gol onChooseColor() handler pentru evenimentul de apăsare pe buton. Vom adăuga mai târziu corpul acestei metode.

E timpul să ne conectăm MainPage în rădăcina noastră App.js fişier. Înlocuiți conținutul vechi cu acesta:

Reîmprospătarea simulatorului produce acest lucru:

1611464770 217 Gestionarea statului intr o aplicatie React Navigation cu

Nu este frumos, dar arată culoarea de fundal și butonul nostru așa cum am intenționat.

Iată un instantaneu cu ceea ce am construit până acum: Instantaneu de cod GitHub 1.

Adăugarea navigării

Acum suntem gata să adăugăm o navigare în aplicația noastră.

Pentru a face acest lucru, deschideți fișierul AppNavigator.js fișier și adăugați acest conținut:

Acest cod este împrumutat de la Exemplu de redux în navigare reactivă proiect.

Acesta definește a StackNavigator, folosindu-ne de MainPage ca ecran principal.

De asemenea, se instalează AppWithNavigationState, un container de nivel superior care deține starea de navigație. Dacă acest lucru pare neclar, nu vă faceți griji. Acesta este codul standard al cazanului în React Navigation și îl vom folosi doar deocamdată pentru a începe lucrurile.

Este timpul să scrieți reductorul de navigație, care va păstra starea de navigație în magazinul Redux. Deschide NavReducer.js fișier și adăugați următoarele:

Acest reductor definește starea inițială de navigare a aplicației noastre. Din nou, codul cazanului.

Acum, să deschidem AppReducer.js fișier și adăugați acest lucru:

Pe măsură ce aplicația noastră crește, este posibil să avem nevoie de alți reductori alături de al nostru NavReducer. Așa că le putem combina pe toate în interior AppReducer.

În cele din urmă, putem actualiza App.js pentru a folosi toate aceste bunătăți noi:

Metoda de redare returnează un furnizor cu magazinul redux creat și deține componenta noastră de nivel superior. Din nou, acesta este doar codul cazanului necesar pentru a conecta lucrurile cu Redux.

Dacă reîmprospătăm simulatorul, acum vom vedea o bară de navigare care apare deasupra:

1611464770 282 Gestionarea statului intr o aplicatie React Navigation cu

După tot acest cod, este posibil să primiți câteva erori pe simulatorul dvs. dacă lipsește ceva. Dacă da, utilizați acest instantaneu de cod pentru a reveni pe drumul cel bun: Instantaneu de cod GitHub 2.

Afișați pagina Alegeți culoarea

Acum că avem un MainPage în interiorul unui StackNavigator, suntem gata să adăugăm ChooseColorPage astfel încât să putem naviga către el.

Deschide ChooseColorPage.js fișier și adăugați următorul cod:

Câteva note:

  • Codul din render() metoda itera prin fiecare culoare și o mapează într-un Button. title și color proprietățile sunt setate.
  • Când butonul este atins, butonul onSelectColor() handler este apelat cu tasta de culoare corespunzătoare.
  • navigation obiectul este accesibil prin props. De fapt, este injectat în toate ecranele din AppNavigator.
  • Apelare this.props.navigation.goBack() ne duce înapoi la ecranul anterior din AppNavigator.
  • În această etapă, colorName nu este încă folosit pentru a seta nicio stare.

Apoi, trebuie să facem al nostru AppNavigator conștient de nou ChooseColorPage ecran. Să îl actualizăm în AppNavigator.js fişier:

În cele din urmă, adăugați codul pentru a naviga la ChooseColorPage cand Choose Color este apăsat pe butonul MainPage.

Dacă reîmprospătăm simulatorul acum și atingem Choose Color, aplicația navighează la noul ecran, care afișează trei butoane:

1611464771 933 Gestionarea statului intr o aplicatie React Navigation cu

Notă: Apelare navigation.navigate('ChooseColor') funcționează pentru că am numit ChooseColor ca unul dintre traseele din AppNavigator.

Atingând pe butonul Înapoi sau pe oricare dintre butoanele de culoare ne aduce înapoi la pagina principală, dar culoarea de fundal nu se modifică în funcție de selecția noastră.

Să remediem asta în secțiunea următoare.

Din nou, dacă ceva nu funcționează, puteți obține instantaneul codului meu salvat până la acest punct: Instantaneu de cod GitHub 3.

Gestionarea stării aplicației

Vom folosi Redux pentru a seta culoarea de fundal a noastră MainPage ca stare a aplicației noastre.

Pentru a face acest lucru, trebuie să definim o acțiune Color Changed și un Reducer de culoare.

Deschide ColorChangedAction.js fișier și adăugați următoarele:

Apoi, deschide ColorReducer.js adauga adauga asta:

Pentru ca acest reductor să poată fi utilizat, trebuie să îl adăugăm la AppReducer.js ca astfel:

Acum suntem gata să-i sunăm pe ai noștri colorChanged acțiune atunci când utilizatorul selectează o culoare în ChooseColorPage. Aceasta este actualizarea ChooseColorPage.js fişier:

Rețineți că am făcut trei modificări:

  • A importat colorChanged acțiune în partea de sus
  • L-am conectat cu connect() și mapStateToProps
  • L-am folosit în interior onSelectColor(colorName)

În această etapă, putem reîmprospăta simulatorul și rula. Dacă alegem o culoare diferită, culoarea de fundal a MainPage tot nu se schimbă.

Asta pentru că nu am spus MainPage pentru a folosi noua stare.

Ușor de remediat. Deschis MainPage.js și adăugați codul necesar:

Câteva note:

  • mapStateToProps acum setează colorName din statul din ColorReducer
  • Acest lucru este apoi accesibil prin intermediul props obiect și poate fi folosit în interior selectedColor()
  • Nu uita import { connect } from 'react-redux'; în vârf

Dacă încercăm din nou aplicația în simulator, acum putem schimba culoarea de fundal. ?

Instantaneu actualizat: Instantaneu de cod GitHub 4.

Bonus: Prezentarea modului de selectare a culorii

Când atingem Choose Color butonul din MainPage, ChooseColorPage alunecă din dreapta. Aceasta este animația de navigare implicită din interior StackNavigator.

Dacă am vrea să vă prezentăm ChooseColorPage modal în schimb?

Acest lucru se realizează cu ușurință prin modificarea configurației noastre AppNavigator ca astfel:

Rețineți adăugarea de navigationOptions cu headerLeft: null proprietate în interior ChooseColor, si mode: ‘modal’ parametru.

Dacă încercăm acest lucru pe simulator, ChooseColorPage acum alunecă de jos.

Navigarea React este foarte personalizabilă. Vă recomand să petreceți ceva timp citind documentația pentru proiect, să înveți toate lucrurile pe care le poți face cu el.

Învelire

Am învățat cum să:

  • Configurați și utilizați Expo pentru a rula o aplicație mobilă pe simulator
  • Construiți o aplicație cu două pagini diferite și navigați între ele cu React Navigation
  • Utilizați acțiuni și reductoare pentru a modifica starea de pe un ecran și utilizați-l pentru a actualiza interfața de utilizare pe altul

Puteți găsi codul sursă complet pe GitHub aici.

De asemenea, am împărtășit public proiectul pe Expo aici.

Sper că v-a plăcut acest tutorial. Un bun pas următor de aici este să ne uităm la oficial Reactați exemple de navigare, precum și pe celălalt tutoriale din comunitate.

Comentariile și feedback-ul sunt apreciate. ?

Și dacă tu ???, aș putea chiar să fac un tutorial video pas cu pas. ?

Despre mine: Sunt un dezvoltator iOS independent, jonglând între muncă contractuală, open source, proiecte secundare și blogging.

Sunt @ biz84 pe Twitter. Îl poți vedea și pe al meu GitHub pagină. Feedback, tweets, gif-uri amuzante, toate sunt binevenite! Favoritul meu? Multe ???. Oh, și prăjituri de ciocolată.