Kuidas React Native rakenduses ekraanide vahel navigeerida

Sageli koostate React Native'i rakenduse loomisel selle erinevatelt ekraanidelt, nagu sisselogimine, avaleht ja teave. Seejärel peate rakendama navigeerimismehhanismi, et kasutajad saaksid rakenduses navigeerida ja selle üksikutele ekraanidele õiges järjekorras juurde pääseda.

Selle õpetuse eesmärk on juhendada teid React Native rakenduses navigeerimissüsteemi seadistamise protsessis. See hõlmab teegi installimist, ekraanide lisamist virnavigaatorisse ja ekraanide ühendamist igas komponendis.

Enne alustamist

Selle õpetuse järgimiseks kohalikus arvutis peab teil olema installitud järgmine:

• Node.js v10 või uuem
• Xcode või Android Studio (seadistatud emulaatori käitamiseks)
• Reageeri Native CLI

Üksikasjalike juhiste saamiseks oma React Native arenduskeskkonna seadistamise kohta saate lugeda ametlik React Native seadistusdokumentatsioon.

Enne kui hakkate uurima, kuidas meie rakenduses React Native navigeerimist rakendada, uurime, kuidas virna navigeerimismehhanism rakenduses React Native töötab.

Virnanavigeerimise toimimise mõistmine

Kujutage ette, et teie rakendus React Native on virn. Esialgu on teil sellel virnal Kodu, mis on esimene ekraan, mis kuvatakse rakenduse avamisel.

Kui peaksite navigeerima aadressile Umbes ekraanilt Kodu ekraan, rakendus vajutaks Umbes virnale, nii et see istub selle peal Kodu. Samamoodi lükkab rakendus virnasse iga uue ekraani, millele navigeerite.

Nüüd, kui soovite naasta eelmisele ekraanile, hüppab rakendus teie praeguse ekraani virnast välja ja kuvab selle all olevat. See käitumine sarnaneb sellega, mis juhtub siis, kui klõpsate oma veebibrauseris ikooni "Tagasi".

Pinna navigeerimismehhanismi selge arusaamaga on nüüd aeg seadistada see rakenduses React Native.

1. Installige omarakenduste jaoks React Navigation

Alustamiseks installige Reageeri navigeerimispakett omarakenduste jaoks oma React Native projektis, käivitades terminalis selle käsu:

npm i @reageeri-navigatsioon/emakeelena

Äsja installitud pakett nõuab Reageerige Native Stack ja Reageerige omaekraanidele korralikult joosta. RN Stacki installimiseks käivitage:

npm i @reageeri-navigatsioon/emakeelena- virna

Teise installimiseks käivitage see:

npm ma reageerin-emakeelena- ekraanid

Nüüd on teil kõik, mida vajate oma rakenduses navigeerimismehhanismi loomise alustamiseks. Järgmine samm on ekraanide seadistamine.

2. Seadistage ekraan rakenduses React Native

Selle näite puhul loome ainult kaks ekraani – avakuva ja teabekuva.

Looge kaust nimega ekraanid teie rakenduse juurkataloogis. Seejärel looge kataloogis kaks faili nimega HomeScreen.js ja AboutScreen.js ekraanid.

Mida lisada oma HomeScreen.js-failile

Avage fail HomeScreen.js ja alustage järgmise importimisega.

importida * nagu Reageerige alates'reageeri';
importida { Tekst, vaade, stiilileht, puutetundlik läbipaistmatus } alates'react-native';
importida { useState } alates'reageeri'

Järgmisena looge HomeScreeni funktsionaalne komponent ja pääsete navigeerimisobjektile juurde, kasutades objekti dekonstruktsiooni (vastavalt Reageerige parimatele tavadele), seejärel tagastage pealkiri ja nupp teabekuvale navigeerimiseks:

eksportidavaikimisifunktsiooniAvakuva({navigation}) { 
tagasi ( 
<Vaadestiilis={styles.container}>
<Tekststiilis={styles.paragraph}> Avakuva Tekst>
 pealkiri="Mine kohta Teave"
 onPress={() => navigation.navigate("AboutScreen")} 
 /> 
Vaade>
 );
}

Siin käsime React Native'il navigeerida Umbes kui kasutaja vajutab nuppu. Sel juhul me andmeid ekraanile ei edasta. Aga oletame, et sa tahad edastada andmed funktsioonile; siin on, kuidas sa seda teeksid:

eksportidavaikimisifunktsiooniAvakuva({navigation}) { 
konst andmed = { veebisaidinimi: "Johni tehnika" }
tagasi ( 
<Vaadestiilis={styles.container}>
// Tekst läheb siia 
 pealkiri="Mine kohta Teave"
 onPress={() => navigation.navigate("AboutScreen", andmed)} 
 /> 
Vaade>
 );
}

Nüüd, kui vajutate nuppu, edastab see kood andmed järgmisele ekraanile, Umbes. Sees AboutScreen.js faili, pääsete juurde marsruudi andmetele ja kuvage need kasutajaliideses.

Mida lisada faili AboutScreen.js?

Avage fail AboutScreen.js ja alustage järgmiste sõltuvuste importimisega.

importida * nagu Reageerige alates'reageeri';
importida { Tekst, vaade, stiilileht, nupp } alates'react-native';

Järgmisena looge Teave ekraani kohta funktsionaalne komponent, mis võtab andmeid marsruut.params atribuut ja tagastab kasutajaliideses olevad andmed:

eksportidavaikimisifunktsiooniTeave ekraani kohta({tee}) { 
lase dataObj = route.params
tagasi ( 
<Vaadestiilis={styles.container}>
<Tekststiilis={styles.paragraph}>
 See on saidi {dataObj.websiteName} ekraan Teave 
Tekst>
Vaade>
 );
}

Kui mäletate, määrasime nimega andmeobjektis ühe atribuudi veebisaidinimi, mille nüüd renderdame faili sees komponent. Saate objektile lisada nii palju atribuute, kui soovite, ja pääseda neile juurde sihtekraanide komponendis.

Järgmine samm on kahe ekraaniga virnavigaatori seadistamine.

3. Ekraanide ühendamine virnanavigaatoriga

Alustuseks importige rakenduses App.js järgmised sõltuvused.

importida * nagu Reageerige alates'reageeri';
importida Avakuva alates'./screens/HomeScreen'
importida Teave ekraani kohta alates'./screens/AboutScreen'
importida { NavigationContainer } alates"@react-navigation/native"
importida { createNativeStackNavigator } alates"@react-navigation/native-stack"

Teisel ja kolmandal real importisime kaks äsja loodud ekraani. Seejärel importisime Navigatsioonikonteiner

alates @react-navigation/native ja createNativeStackNavigator alates @react-navigation/native-stack et aidata meil ekraane ühendada.

Järgmiseks helista createNativeStackNavigator virna toomiseks:

konst Stack = createNativeStackNavigator()

See võimaldab meil "virna panna" kuvad, mille vahel soovite oma rakenduses liikuda.

Looge rakenduse komponendi funktsioon ja tagastage mõlemad ekraanid nagu allpool näidatud. Pakkige see kindlasti sisse või see ei tööta:

eksportidavaikimisifunktsiooniRakendus() { 
tagasi ( 
<Navigatsioonikonteiner>
<Virna. Navigaator>
<Virna. Ekraannimi="Avakuva"komponent = {Avakuva} />
<Virna. Ekraannimi="AboutScreen"komponent = {AboutScreen} />
Virna. Navigaator>
Navigatsioonikonteiner>
 );
}

See kood asetab avaekraani virna ülaosale, mis tähendab, et rakendus renderdab laadimise lõppedes esmalt Home komponendi.

Nüüd on kõik paika pandud. Rakendust saate testida, klõpsates nuppu Minge jaotisse Teave nuppu avalehe kasutajaliideses. See peaks teid ümber suunama Umbes, ja leiate veebisaidinimi kasutajaliideses kuvatav atribuut:

Parim asi React Navigation for Native kasutamisel on see, et seda on nii lihtne seadistada ja kasutada. See ei nõua lisakonfiguratsioone (peale teie installitud nõutavate teekide) ja saate ka ühenduse luua erinevat tüüpi maksemüürid (kui kavatsete luua tellimusepõhise rakenduse).

Lisateave React Native'i kohta

React Native on platvormideülene raamistik Android- ja iOS-seadmetes töötavate rakenduste loomiseks. React Native'i kohta on palju õppida ja kui olete raamistiku kasutamises uus, peaksite alustama põhitõdede õppimisest.