Cum să navigați între ecrane într-o aplicație React Native

Adesea, atunci când construiți o aplicație React Native, o veți compune din diferite ecrane, cum ar fi Conectare, Acasă și Despre. Apoi, va trebui să implementați un mecanism de navigare, astfel încât utilizatorii să poată naviga în aplicație și să acceseze ecranele sale individuale în ordinea corectă.

Scopul acestui tutorial este să vă ghideze prin procesul de configurare a unui sistem de navigație în aplicația dvs. React Native. Aceasta include instalarea bibliotecii, adăugarea ecranelor dvs. la navigatorul de stivă și conectarea ecranelor împreună din fiecare dintre componente.

Înainte de a începe

Pentru a urma acest tutorial pe computerul local, trebuie să aveți următoarele instalate:

• Node.js v10 sau mai recent
• Xcode sau Android Studio (configurat pentru a rula emulatorul)
• React Native CLI

Pentru instrucțiuni pas cu pas despre cum să configurați mediul de dezvoltare React Native, puteți citi documentul oficial React Native documentația de instalare.

Înainte de a începe să vedeți cum să implementați navigarea în aplicația noastră React Native, să înțelegem cum funcționează mecanismul de navigare a stivei în React Native.

Înțelegerea modului în care funcționează Stack Navigation

Imaginează-ți că aplicația ta React Native este o stivă. Inițial, pe acea stivă, aveți Acasă, care este primul ecran care se afișează când deschideți aplicația.

Dacă ar fi să navigați la Despre ecran de la Acasă ecran, aplicația ar apăsa Despre pe stivă, astfel încât să se așeze deasupra Acasă. În mod similar, aplicația împinge fiecare ecran nou la care navigați în stivă.

Acum, dacă doriți să reveniți la ecranul anterior, aplicația vă scoate ecranul curent din stivă și vă arată pe cel de sub el. Acest comportament este similar cu ceea ce se întâmplă când faceți clic pe pictograma „înapoi” din browserul dvs. web.

Cu o înțelegere clară a mecanismului de navigare a stivei, acum este timpul să-l configurați într-o aplicație React Native.

1. Instalați React Navigation pentru aplicații native

Pentru a începe, instalați Pachetul de navigare React pentru aplicațiile native din proiectul dvs. React Native executând această comandă pe un terminal:

npm i @reacţiona-navigare/nativ

Pachetul pe care tocmai l-ați instalat necesită React Native Stack și React Native Screens pentru a rula corect. Pentru a instala RN Stack, rulați:

npm i @reacţiona-navigare/nativ-grămadă

Pentru a instala al doilea, rulați asta:

npm reacţionează-nativ-ecranele

Acum aveți tot ce aveți nevoie pentru a începe să creați mecanismul de navigare în aplicația dvs. Următorul pas este configurarea ecranelor.

2. Configurați ecranul în aplicația dvs. React Native

Pentru acest exemplu, vom crea doar două ecrane — ecranul de pornire și ecranul despre.

Creați un folder numit ecrane în directorul rădăcină al aplicației dvs. După aceea, creați două fișiere denumite HomeScreen.js și AboutScreen.js în interiorul directorului ecrane.

Ce să adăugați la fișierul dvs. HomeScreen.js

Deschideți fișierul HomeScreen.js și începeți prin a importa următoarele:

import * la fel de Reacţiona din'reacţiona';
import { Text, View, Style Sheet, TouchableOpacity } din„reacționează-nativ”;
import { useState } din'reacţiona'

Apoi, creați componenta funcțională HomeScreen și accesați obiectul de navigare folosind deconstrucția obiectului (conform Reacționați la cele mai bune practici), apoi returnați un titlu și un buton pentru navigarea la ecranul despre:

exportMod implicitfuncţieEcranul de start({navigare}) { 
întoarcere ( 
<Vederestil={styles.container}>
<Textstil={styles.paragraph}> Ecranul de start Text>
 titlu=„Mergi la Despre”
 onPress={() => navigation.navigate(„Despre ecran”)} 
 /> 
Vedere>
 );
}

Aici îi spunem lui React Native să navigheze Despre când un utilizator apasă butonul. În acest caz, nu transmitem date pe ecran. Dar să presupunem că vrei transmiteți date funcției; iată cum ai face asta:

exportMod implicitfuncţieEcranul de start({navigare}) { 
const date = { websiteName: „Tehnologia lui John” }
întoarcere ( 
<Vederestil={styles.container}>
// Textul merge aici 
 titlu=„Mergi la Despre”
 onPress={() => navigation.navigate(„Despre ecran”, date)} 
 /> 
Vedere>
 );
}

Acum, când apăsați butonul, acest cod trece datele la următorul ecran, Despre. În interiorul DespreScreen.js fișier, puteți accesa datele de pe traseu și le puteți afișa pe UI.

Ce să adăugați la fișierul dvs. AboutScreen.js

Deschideți fișierul AboutScreen.js și începeți prin a importa următoarele dependențe:

import * la fel de Reacţiona din'reacţiona';
import { Text, Vizualizare, Foaie de stil, Buton } din„reacționează-nativ”;

Apoi, creați Despre ecran componentă funcțională care preia date din traseu.params proprietate și returnează datele în UI:

exportMod implicitfuncţieDespre ecran({traseu}) { 
lăsa dataObj = route.params
întoarcere ( 
<Vederestil={styles.container}>
<Textstil={styles.paragraph}>
 Acest este ecranul Despre din {dataObj.websiteName} 
Text>
Vedere>
 );
}

Dacă vă amintiți, am specificat o singură proprietate în obiectul de date numit websiteName, pe care acum îl redăm în interiorul componentă. Puteți adăuga câte proprietăți doriți în obiect și le puteți accesa în interiorul componentei ecrane țintă.

Următorul pas este să configurați navigatorul nostru de stivă cu cele două ecrane.

3. Conectarea ecranelor cu Stack Navigator

În App.js, începeți prin a importa următoarele dependențe:

import * la fel de Reacţiona din'reacţiona';
import Ecranul de start din„./screens/HomeScreen”
import Despre ecran din„./screens/AboutScreen”
import { Navigation Container } din„@react-navigation/native”
import { createNativeStackNavigator } din„@react-navigation/native-stack”

Pe rândurile două și trei, am importat cele două ecrane pe care tocmai le-am creat. Apoi, am importat Navigation Container

din @react-navigation/native și createNativeStackNavigator din @react-navigation/native-stack pentru a ne ajuta să conectăm ecranele.

Apoi, sună createNativeStackNavigator pentru a prelua stiva:

const Stivă = createNativeStackNavigator()

Acest lucru ne permite să „stivuim” ecranele între care doriți să faceți tranziția în aplicația dvs.

Creați funcția componentă a aplicației și returnați ambele ecrane în așa cum se arată mai jos. Asigurați-vă că îl înfășurați în sau nu va merge:

exportMod implicitfuncţieApp() { 
întoarcere ( 
<Navigation Container>
<Grămadă. Navigator>
<Grămadă. EcranNume="Ecranul de start"componentă = {Ecranul de start} />
<Grămadă. EcranNume=„Despre ecran”componentă = {AboutScreen} />
Grămadă. Navigator>
Navigation Container>
 );
}

Acest cod plasează ecranul HomeScreen deasupra stivei, ceea ce înseamnă că aplicația va reda mai întâi componenta Home când se termină de încărcat.

Acum totul este setat. Puteți testa aplicația făcând clic pe Accesați Despre pe butonul Home UI. Acest lucru ar trebui să vă redirecționeze către Despre, și veți găsi websiteName proprietate afișată în interfața de utilizare:

Cel mai bun lucru despre utilizarea React Navigation for Native este că este atât de ușor de configurat și utilizat. Nu necesită configurații suplimentare (în afară de bibliotecile necesare pe care le-ați instalat) și vă puteți conecta diferite tipuri de Paywall-uri (dacă intenționați să construiți o aplicație bazată pe abonament).

Aflați mai multe despre React Native

React Native este un cadru multiplatform pentru crearea de aplicații care rulează pe dispozitive Android și iOS. Sunt atât de multe de învățat despre React Native și, dacă sunteți nou în utilizarea cadrului, ar trebui să începeți prin a învăța elementele de bază.