Kā pārvietoties starp ekrāniem React Native lietotnē

Bieži vien, veidojot React Native lietotni, jūs to veidojat no dažādiem ekrāniem, piemēram, Pieteikšanās, Sākums un Par. Pēc tam jums būs jāievieš navigācijas mehānisms, lai lietotāji varētu pārvietoties lietotnē un piekļūt tās atsevišķiem ekrāniem pareizajā secībā.

Šīs apmācības mērķis ir iepazīstināt jūs ar navigācijas sistēmas iestatīšanas procesu jūsu React Native lietojumprogrammā. Tas ietver bibliotēkas instalēšanu, ekrānu pievienošanu skursteņa navigatoram un ekrānu savienošanu no katra komponenta.

Pirms tu sāc

Lai izmantotu šo pamācību savā lokālajā datorā, jums ir jābūt instalētam:

• Node.js v10 vai jaunāka versija
• Xcode vai Android Studio (iestatīts, lai palaistu emulatoru)
• Reaģēt Native CLI

Lai iegūtu detalizētus norādījumus par React Native izstrādes vides iestatīšanu, varat izlasīt oficiālā React Native uzstādīšanas dokumentācija.

Pirms sākat aplūkot, kā ieviest navigāciju mūsu React Native lietotnē, sapratīsim, kā React Native darbojas steka navigācijas mehānisms.

Izpratne par steka navigācijas darbību

Iedomājieties, ka jūsu React Native lietojumprogramma ir kaudze. Sākotnēji uz šīs kaudzes jums ir Mājas, kas ir pirmais ekrāns, kas tiek parādīts, atverot lietotni.

Ja jums būtu jāpārvietojas uz Par ekrāns no Mājas ekrāns, lietotne nospiestu Par uz kaudzes, tāpēc tā atrodas virsū Mājas. Tāpat lietotne katru jauno ekrānu, uz kuru pārvietojaties, nospiež uz kaudzīti.

Tagad, ja vēlaties atgriezties iepriekšējā ekrānā, lietotne izvelk jūsu pašreizējo ekrānu no kaudzes un parāda zem tā esošo. Šī darbība ir līdzīga tai, kas notiek, kad tīmekļa pārlūkprogrammā noklikšķināt uz ikonas "Atpakaļ".

Skaidri izprotot steka navigācijas mehānismu, ir pienācis laiks to iestatīt React Native lietotnē.

1. Instalējiet React Navigation vietējām lietotnēm

Lai sāktu, instalējiet Reaģēt navigācijas pakotni vietējām lietotnēm jūsu React Native projektā, izpildot šo komandu terminālī:

npm i @reaģēt-navigācija/dzimtā

Nepieciešama tikko instalētā pakotne Reaģēt Native Stack un Reaģējiet uz vietējiem ekrāniem lai skrietu pareizi. Lai instalētu RN Stack, palaidiet:

npm i @reaģēt-navigācija/dzimtā-kaudze

Lai instalētu otro, izpildiet šo:

npm es reaģēju-dzimtā- ekrāni

Tagad jums ir viss nepieciešamais, lai lietojumprogrammā sāktu izveidot navigācijas mehānismu. Nākamais solis ir ekrānu iestatīšana.

2. Iestatiet ekrānu savā React Native lietotnē

Šajā piemērā mēs izveidosim tikai divus ekrānus — sākuma ekrānu un ekrānu par.

Izveidojiet mapi ar nosaukumu ekrāni lietojumprogrammas saknes direktorijā. Pēc tam direktorijā izveidojiet divus failus ar nosaukumu HomeScreen.js un AboutScreen.js ekrāni.

Ko pievienot savam HomeScreen.js failam

Atveriet failu HomeScreen.js un sāciet, importējot tālāk norādīto.

imports * kā Reaģēt no'reaģēt';
imports { Text, View, Style Sheet, Touchable Opacity } no'react-native';
imports { useState } no'reaģēt'

Pēc tam izveidojiet HomeScreen funkcionālo komponentu un piekļūstiet navigācijas objektam, izmantojot objekta dekonstrukciju (kā norādīts Reaģējiet uz labāko praksi), pēc tam atgrieziet nosaukumu un pogu, lai pārietu uz ekrānu par:

eksportētnoklusējumafunkcijuSākuma ekrāns({navigation}) { 
atgriezties ( 
<Skatītstils={styles.container}>
<Tekstsstils={styles.paragraph}> Sākuma ekrāns Teksts>
 virsraksts="Iet uz Par"
 onPress={() => navigācija.navigate("Par ekrānu")} 
 /> 
Skatīt>
 );
}

Šeit mēs norādām React Native, uz kuru doties Par kad lietotājs nospiež pogu. Šajā gadījumā mēs nenosūtām nekādus datus ekrānam. Bet pieņemsim, ka vēlaties nodod datus funkcijai; Lūk, kā jūs to darītu:

eksportētnoklusējumafunkcijuSākuma ekrāns({navigation}) { 
konst dati = { vietnes nosaukums: "Jāņa tehnika" }
atgriezties ( 
<Skatītstils={styles.container}>
// Teksts iet šeit 
 virsraksts="Iet uz Par"
 onPress={() => navigācija.navigate("Par ekrānu", dati)} 
 /> 
Skatīt>
 );
}

Tagad, nospiežot pogu, šis kods nosūta datus uz nākamo ekrānu, Par. Iekšpusē AboutScreen.js failu, varat piekļūt datiem no maršruta un parādīt tos lietotāja saskarnē.

Ko pievienot failam AboutScreen.js

Atveriet failu AboutScreen.js un sāciet, importējot šādas atkarības:

imports * kā Reaģēt no'reaģēt';
imports { Teksts, skats, stila lapa, poga } no'react-native';

Pēc tam izveidojiet AboutScreen funkcionāls komponents, kas uztver datus no maršruts.params rekvizītu un atgriež datus lietotāja saskarnē:

eksportētnoklusējumafunkcijuAboutScreen({route}) { 
ļaut dataObj = route.params
atgriezties ( 
<Skatītstils={styles.container}>
<Tekstsstils={styles.paragraph}>
 Šis ir {dataObj.websiteName} ekrāns Par 
Teksts>
Skatīt>
 );
}

Ja atceraties, datu objektā ar nosaukumu mēs norādījām vienu rekvizītu vietnes nosaukums, ko mēs tagad renderējam iekšā komponents. Objektam varat pievienot tik daudz rekvizītu, cik vēlaties, un piekļūt tiem mērķa ekrānu komponentā.

Nākamais solis ir iestatīt mūsu kaudzes navigatoru ar diviem ekrāniem.

3. Ekrānu savienošana ar Stack Navigator

Programmā App.js sāciet, importējot šādas atkarības:

imports * kā Reaģēt no'reaģēt';
imports Sākuma ekrāns no'./screens/HomeScreen'
imports AboutScreen no'./screens/AboutScreen'
imports { NavigationContainer } no"@react-navigation/native"
imports { CreateNativeStackNavigator } no"@react-navigation/native-stack"

Otrajā un trešajā rindā mēs importējām divus tikko izveidotos ekrānus. Pēc tam mēs importējām Navigācijas konteiners

no @react-navigation/native un CreateNativeStackNavigator no @react-navigation/native-stack lai palīdzētu mums savienot ekrānus.

Tālāk zvaniet CreateNativeStackNavigator lai izgūtu steku:

konst Stack = createNativeStackNavigator()

Tas ļauj mums “sakārtot” ekrānus, starp kuriem vēlaties pārslēgties jūsu lietotnē.

Izveidojiet lietotnes komponenta funkciju un atgrieziet abus ekrānus kā parādīts zemāk. Noteikti iesaiņojiet to vai arī tas nedarbosies:

eksportētnoklusējumafunkcijuApp() { 
atgriezties ( 
<Navigācijas konteiners>
<Kaudze. Navigators>
<Kaudze. Ekrānsnosaukums="Sākuma ekrāns"komponents = {HomeScreen} />
<Kaudze. Ekrānsnosaukums="Par ekrānu"komponents = {AboutScreen} />
Kaudze. Navigators>
Navigācijas konteiners>
 );
}

Šis kods novieto sākuma ekrāna ekrānu skursteņa augšpusē, kas nozīmē, ka lietotne vispirms atveidos sākuma komponentu, kad tā pabeigs ielādi.

Tagad viss ir iestatīts. Varat pārbaudīt lietotni, noklikšķinot uz Dodieties uz sadaļu Par poga sākuma lietotāja interfeisā. Tam vajadzētu jūs novirzīt uz Par, un jūs atradīsit vietnes nosaukums lietotāja saskarnē parādītais īpašums:

Vislabākais, izmantojot React Navigation for Native, ir tas, ka to ir tik vienkārši iestatīt un lietot. Tam nav nepieciešamas nekādas papildu konfigurācijas (izņemot jūsu instalētās nepieciešamās bibliotēkas), un jūs varat arī izveidot savienojumu dažāda veida Paywalls (ja plānojat izveidot uz abonementu balstītu lietotni).

Uzziniet vairāk par React Native

React Native ir starpplatformu sistēma lietojumprogrammu izveidei, kas darbojas Android un iOS ierīcēs. Ir tik daudz ko uzzināt par React Native, un, ja esat iesācējs ietvara lietošanā, jums vajadzētu sākt, apgūstot pamatus.