Korištenje navigatora snopa može pomoći vašoj aplikaciji u prijelazu s jednog zaslona na drugi, uz minimalan broj koda.

Često, kada gradite React Native aplikaciju, sastavljat ćete je iz različitih zaslona kao što su Login, Home i About. Zatim ćete morati implementirati navigacijski mehanizam kako bi vaši korisnici mogli navigirati aplikacijom i pristupiti njezinim pojedinačnim zaslonima pravim redoslijedom.

Svrha ovog vodiča je provesti vas kroz proces postavljanja navigacijskog sustava u vašoj aplikaciji React Native. To uključuje instaliranje biblioteke, dodavanje vaših zaslona u navigator snopa i međusobno povezivanje zaslona iz svake vaše komponente.

Prije nego što počneš

Da biste pratili ovaj vodič na vašem lokalnom računalu, morate imati instalirano sljedeće:

  • Node.js v10 ili noviji
  • Xcode ili Android Studio (postavljeno za pokretanje emulatora)
  • React Native CLI

Za upute korak po korak o tome kako postaviti svoje razvojno okruženje React Native, možete pročitati službeni React Native dokumentacija za postavljanje.

instagram viewer

Prije nego što počnete gledati kako implementirati navigaciju u našoj aplikaciji React Native, shvatimo kako mehanizam za navigaciju stogom funkcionira u React Native.

Razumijevanje načina na koji funkcionira navigacija snopom

Zamislite da je vaša React Native aplikacija hrpa. U početku, na toj gomili, imate Dom, što je prvi zaslon koji se prikazuje kada otvorite aplikaciju.

Ako biste krenuli prema Oko zaslon od Dom zaslon, aplikacija bi gurnula Oko na hrpu, tako da sjedi na vrhu Dom. Slično tome, aplikacija gura svaki novi zaslon na koji navigirate na stog.

Sada, ako se želite vratiti na prethodni zaslon, aplikacija izbacuje vaš trenutačni zaslon iz niza i prikazuje vam onaj ispod njega. Ovo ponašanje je slično onome što se događa kada kliknete ikonu "natrag" u svom web pregledniku.

S jasnim razumijevanjem mehanizma za navigaciju stogom, vrijeme je da ga postavite u aplikaciji React Native.

1. Instalirajte React navigaciju za izvorne aplikacije

Za početak instalirajte React navigacijski paket za izvorne aplikacije u vašem React Native projektu izvršavanjem ove naredbe na terminalu:

npm i @reagirati-navigacija/domaći

Paket koji ste upravo instalirali zahtijeva React Native Stack i Reagirajte izvorne zaslone pravilno trčati. Da biste instalirali RN Stack, pokrenite:

npm i @reagirati-navigacija/domaći-stog

Za instalaciju drugog pokrenite ovo:

npm reagiram-domaći-zasloni

Sada imate sve što vam je potrebno za početak stvaranja navigacijskog mehanizma u vašoj aplikaciji. Sljedeći korak je postavljanje zaslona.

2. Postavite zaslon u svojoj React Native aplikaciji

Za ovaj primjer, izradit ćemo samo dva zaslona — početni zaslon i zaslon s informacijama.

Stvorite mapu pod nazivom ekrani unutar korijenskog direktorija vaše aplikacije. Nakon toga stvorite dvije datoteke pod nazivom HomeScreen.js i AboutScreen.js unutar direktorija ekrani.

Što dodati svojoj datoteci HomeScreen.js

Otvorite datoteku HomeScreen.js i započnite s uvozom sljedećeg:

uvoz * kao Reagirati iz'reagirati';
uvoz { Text, View, StyleSheet, TouchableOpacity } iz'react-native';
uvoz {useState} iz'reagirati'

Zatim stvorite funkcionalnu komponentu HomeScreen i pristupite navigacijskom objektu pomoću dekonstrukcije objekta (prema React najbolje prakse), zatim vratite naslov i gumb za navigaciju na zaslon o:

izvozzadanofunkcijaPočetni zaslon({navigacija}) { 
povratak ( 
<Pogledstil={styles.container}>
<Tekststil={styles.paragraph}> Početni zaslon Tekst>
 naslov="Idi na O"
 onPress={() => navigation.navigate('AboutScreen')} 
 /> 
Pogled>
 );
}

Ovdje govorimo React Nativeu da navigira Oko kada korisnik pritisne gumb. U ovom slučaju ne prosljeđujemo nikakve podatke na zaslon. Ali pretpostavimo da želite proslijediti podatke u funkciju; evo kako biste to učinili:

izvozzadanofunkcijaPočetni zaslon({navigacija}) { 
konst podaci = { websiteName: "John's Tech" }
povratak ( 
<Pogledstil={styles.container}>
// Tekst ide ovdje 
 naslov="Idi na O"
 onPress={() => navigation.navigate('AboutScreen', podaci)} 
 /> 
Pogled>
 );
}

Sada kada pritisnete gumb, ovaj kod prosljeđuje podatke na sljedeći zaslon, Oko. Unutar AboutScreen.js datoteku, možete pristupiti podacima s rute i prikazati ih na korisničkom sučelju.

Što dodati svojoj datoteci AboutScreen.js

Otvorite datoteku AboutScreen.js i započnite s uvozom sljedećih ovisnosti:

uvoz * kao Reagirati iz'reagirati';
uvoz {Tekst, prikaz, stilski list, gumb} iz'react-native';

Zatim stvorite AboutScreen funkcionalna komponenta koja preuzima podatke iz ruta.params svojstvo i vraća podatke u UI:

izvozzadanofunkcijaAboutScreen({ruta}) { 
neka dataObj = route.params
povratak ( 
<Pogledstil={styles.container}>
<Tekststil={styles.paragraph}>
 Ovaj je zaslon O {dataObj.websiteName} 
Tekst>
Pogled>
 );
}

Ako se sjećate, naveli smo jedno svojstvo u navedenom podatkovnom objektu websiteName, koji sada prikazujemo unutar komponenta. Objektu možete dodati onoliko svojstava koliko želite i pristupiti im unutar komponente ciljnih zaslona.

Sljedeći korak je postavljanje našeg navigatora niza s dva zaslona.

3. Povezivanje zaslona s Stack Navigatorom

Unutar App.js započnite s uvozom sljedećih ovisnosti:

uvoz * kao Reagirati iz'reagirati';
uvoz Početni zaslon iz'./screens/HomeScreen'
uvoz AboutScreen iz'./screens/AboutScreen'
uvoz {NavigationContainer} iz"@react-navigation/native"
uvoz { createNativeStackNavigator } iz"@react-navigation/native-stack"

U dva i tri retka uvezli smo dva zaslona koja smo upravo stvorili. Onda smo uvozili Navigacijski spremnik

iz @react-navigation/native i createNativeStackNavigator iz @react-navigation/native-stack da nam pomogne spojiti ekrane.

Dalje, poziv createNativeStackNavigator za preuzimanje hrpe:

konst Stog = createNativeStackNavigator()

To nam omogućuje da "složimo" zaslone između kojih želite prelaziti u vašoj aplikaciji.

Stvorite funkciju komponente aplikacije i vratite oba zaslona u kako je prikazano dolje. Obavezno ga zamotajte u ili neće raditi:

izvozzadanofunkcijaaplikacija() { 
povratak ( 
<Navigacijski spremnik>
<Stog. Navigator>
<Stog. ZaslonIme="Početni zaslon"komponenta = {Početni zaslon} />
<Stog. ZaslonIme="O zaslonu"komponenta = {AboutScreen} />
Stog. Navigator>
Navigacijski spremnik>
 );
}

Ovaj kod postavlja zaslon HomeScreen na vrh hrpe, što znači da će aplikacija prvo renderirati komponentu Home kada završi s učitavanjem.

Sada je sve spremno. Aplikaciju možete testirati klikom na Idite na About gumb na početnom korisničkom sučelju. Ovo bi vas trebalo preusmjeriti na Oko, i pronaći ćete websiteName svojstvo prikazano u korisničkom sučelju:

2 Slike

Najbolja stvar kod korištenja React Navigation for Native je to što je tako lako postaviti i koristiti. Ne zahtijeva nikakve dodatne konfiguracije (osim potrebnih biblioteka koje ste instalirali), a možete se i povezati različite vrste Paywalla (ako namjeravate izraditi aplikaciju temeljenu na pretplati).

Saznajte više o React Native

React Native je međuplatformski okvir za izradu aplikacija koje se izvode na Android i iOS uređajima. Ima toliko toga za naučiti o React Nativeu, a ako ste novi u korištenju okvira, trebali biste početi s učenjem osnova.