Kako krmariti med zasloni v domači aplikaciji React

Ko gradite aplikacijo React Native, jo boste pogosto sestavili iz različnih zaslonov, kot so Prijava, Domov in O aplikaciji. Nato boste morali implementirati navigacijski mehanizem, da bodo vaši uporabniki lahko krmarili po aplikaciji in dostopali do njenih posameznih zaslonov v pravilnem vrstnem redu.

Namen te vadnice je, da vas vodi skozi postopek nastavitve navigacijskega sistema v vaši aplikaciji React Native. To vključuje namestitev knjižnice, dodajanje vaših zaslonov v navigator sklada in povezovanje zaslonov znotraj vsake vaše komponente.

Preden začneš

Če želite slediti tej vadnici v lokalnem računalniku, morate imeti nameščeno naslednje:

• Node.js v10 ali novejši
• Xcode oz Android Studio (nastavljen za zagon emulatorja)
• React Native CLI

Za navodila po korakih o tem, kako nastaviti svoje razvojno okolje React Native, lahko preberete uradni React Native namestitveno dokumentacijo.

Preden začnete iskati, kako implementirati navigacijo v naši aplikaciji React Native, poglejmo, kako mehanizem za navigacijo sklada deluje v React Native.

Razumevanje delovanja navigacije po skladih

Predstavljajte si, da je vaša aplikacija React Native sklad. Na začetku, na tem kupu, imate domov, ki je prvi zaslon, ki se prikaže, ko odprete aplikacijo.

Če bi se pomaknili do O tem zaslon iz domov zaslon, bi aplikacija potisnila O tem na sklad, tako da sedi na vrhu domov. Podobno aplikacija vsak nov zaslon, do katerega se pomaknete, potisne v sklad.

Zdaj, če se želite vrniti na prejšnji zaslon, aplikacija vaš trenutni zaslon odstrani iz sklada in vam pokaže tistega pod njim. To vedenje je podobno tistemu, kar se zgodi, ko v spletnem brskalniku kliknete ikono »nazaj«.

Z jasnim razumevanjem mehanizma za krmarjenje sklada je zdaj čas, da ga nastavite v aplikaciji React Native.

1. Namestite React Navigation for Native Apps

Za začetek namestite React navigacijski paket za izvorne aplikacije v vašem projektu React Native tako, da izvedete ta ukaz na terminalu:

npm i @reagiraj-navigacija/domačin

Paket, ki ste ga pravkar namestili, zahteva React Native Stack in Reaction Native Screens pravilno teči. Če želite namestiti RN Stack, zaženite:

npm i @reagiraj-navigacija/domačin-skladišče

Če želite namestiti drugo, zaženite to:

npm reagiram-domačin- zasloni

Zdaj imate vse, kar potrebujete, da začnete ustvarjati navigacijski mehanizem v svoji aplikaciji. Naslednji korak je nastavitev zaslonov.

2. Nastavite zaslon v svoji domači aplikaciji React

Za ta primer bomo ustvarili samo dva zaslona – začetni zaslon in zaslon o tem.

Ustvarite mapo z imenom zasloni znotraj korenskega imenika vaše aplikacije. Nato znotraj imenika ustvarite dve datoteki z imenom HomeScreen.js in AboutScreen.js zasloni.

Kaj dodati v datoteko HomeScreen.js

Odprite datoteko HomeScreen.js in začnite z uvozom naslednjega:

uvoz * kot Reagiraj od'reagirati';
uvoz {Besedilo, pogled, slogovna tabela, motnost na dotik} od'react-native';
uvoz {useState} od'reagirati'

Nato ustvarite funkcionalno komponento HomeScreen in dostopajte do navigacijskega objekta z dekonstrukcijo objekta (v skladu z React najboljše prakse), nato vrnite naslov in gumb za navigacijo na zaslon o tem:

izvozprivzetofunkcijoDomači zaslon({krmarjenje}) { 
vrnitev ( 
<Pogledstil={styles.container}>
<Besedilostil={styles.paragraph}> Domači zaslon Besedilo>
 naslov="Pojdi na O"
 onPress={() => navigation.navigate('AboutScreen')} 
 /> 
Pogled>
 );
}

Tukaj rečemo React Native, naj se pomakne do O tem ko uporabnik pritisne gumb. V tem primeru na zaslon ne posredujemo nobenih podatkov. Toda recimo, da želite posreduje podatke funkciji; evo kako bi to naredili:

izvozprivzetofunkcijoDomači zaslon({krmarjenje}) { 
konst podatki = { ime spletne strani: "John's Tech" }
vrnitev ( 
<Pogledstil={styles.container}>
// Sem gre besedilo 
 naslov="Pojdi na O"
 onPress={() => navigation.navigate('AboutScreen', podatki)} 
 /> 
Pogled>
 );
}

Zdaj, ko pritisnete gumb, ta koda posreduje podatke na naslednji zaslon, O tem. Znotraj AboutScreen.js datoteko, lahko dostopate do podatkov s poti in jih prikažete v uporabniškem vmesniku.

Kaj dodati v datoteko AboutScreen.js

Odprite datoteko AboutScreen.js in začnite z uvozom naslednjih odvisnosti:

uvoz * kot Reagiraj od'reagirati';
uvoz {Besedilo, pogled, slogovna tabela, gumb} od'react-native';

Nato ustvarite AboutScreen funkcionalna komponenta, ki sprejema podatke iz route.params in vrne podatke v uporabniškem vmesniku:

izvozprivzetofunkcijoAboutScreen({route}) { 
pustiti dataObj = route.params
vrnitev ( 
<Pogledstil={styles.container}>
<Besedilostil={styles.paragraph}>
 to je zaslon O {dataObj.websiteName} 
Besedilo>
Pogled>
 );
}

Če se spomnite, smo podali eno lastnost v imenovanem podatkovnem objektu ime spletne strani, ki ga zdaj upodabljamo znotraj komponento. Objektu lahko dodate poljubno število lastnosti in do njih dostopate znotraj komponente ciljnih zaslonov.

Naslednji korak je nastavitev našega navigatorja skladov z dvema zaslonoma.

3. Povezovanje zaslonov s Stack Navigatorjem

Znotraj App.js začnite z uvozom naslednjih odvisnosti:

uvoz * kot Reagiraj od'reagirati';
uvoz Domači zaslon od'./screens/HomeScreen'
uvoz AboutScreen od'./screens/AboutScreen'
uvoz {NavigationContainer} od"@react-navigation/native"
uvoz { createNativeStackNavigator } od"@react-navigation/native-stack"

V drugi in tretji vrstici smo uvozili dva zaslona, ​​ki smo ju pravkar ustvarili. Potem smo uvozili Navigacijski vsebnik

od @react-navigation/native in createNativeStackNavigator od @react-navigation/native-stack da nam pomaga pri povezovanju zaslonov.

Naprej pokliči createNativeStackNavigator za pridobitev sklada:

konst Stack = createNativeStackNavigator()

To nam omogoča, da "sestavimo" zaslone, med katerimi želite prehajati v vaši aplikaciji.

Ustvarite funkcijo komponente aplikacije in vrnite oba zaslona v kot je prikazano spodaj. Ne pozabite ga zaviti v ali pa ne bo delovalo:

izvozprivzetofunkcijoaplikacija() { 
vrnitev ( 
<Navigacijski vsebnik>
<Stack. Navigator>
<Stack. zaslonime="Domači zaslon"komponento = {Domači zaslon} />
<Stack. zaslonime="AboutScreen"komponento = {AboutScreen} />
Stack. Navigator>
Navigacijski vsebnik>
 );
}

Ta koda postavi zaslon HomeScreen na vrh sklada, kar pomeni, da bo aplikacija najprej upodobila komponento Home, ko se konča z nalaganjem.

Zdaj je vse pripravljeno. Aplikacijo lahko preizkusite s klikom na Pojdite na About gumb na domačem uporabniškem vmesniku. To bi vas moralo preusmeriti na O tem, in našli boste ime spletne strani lastnost, prikazana v uporabniškem vmesniku:

Najboljša stvar pri uporabi React Navigation for Native je, da je tako preprosta za nastavitev in uporabo. Ne zahteva nobenih dodatnih konfiguracij (razen zahtevanih knjižnic, ki ste jih namestili), lahko pa se tudi povežete različne vrste plačilnih zidov (če nameravate zgraditi naročniško aplikacijo).

Izvedite več o React Native

React Native je večplatformsko ogrodje za ustvarjanje aplikacij, ki delujejo v napravah Android in iOS. Toliko se je treba naučiti o React Native, in če ste novi v uporabi ogrodja, bi morali začeti z učenjem osnov.