Ako sa pohybovať medzi obrazovkami v aplikácii React Native

Pri vytváraní aplikácie React Native ju často skladáte z rôznych obrazoviek, ako sú Prihlásenie, Domov a O aplikácii. Potom budete musieť implementovať navigačný mechanizmus, aby vaši používatelia mohli prechádzať aplikáciou a pristupovať k jej jednotlivým obrazovkám v správnom poradí.

Účelom tohto návodu je previesť vás procesom nastavenia navigačného systému vo vašej aplikácii React Native. To zahŕňa inštaláciu knižnice, pridanie obrazoviek do navigátora zásobníka a prepojenie obrazoviek z každého z vašich komponentov.

Predtým ako začneš

Ak chcete postupovať podľa tohto návodu na lokálnom počítači, musíte mať nainštalované nasledovné:

• Node.js v10 alebo novší
• Xcode alebo Android Studio (nastavené na spustenie emulátora)
• Reagovať Native CLI

Podrobné pokyny, ako nastaviť vývojové prostredie React Native, si môžete prečítať v oficiálny React Native dokumentáciu nastavenia.

Predtým, ako sa začnete zaoberať tým, ako implementovať navigáciu v našej aplikácii React Native, pochopme, ako funguje mechanizmus navigácie zásobníka v React Native.

Pochopenie toho, ako funguje navigácia v zásobníku

Predstavte si, že vaša aplikácia React Native je zásobník. Spočiatku na tomto zásobníku máte Domov, čo je prvá obrazovka, ktorá sa zobrazí pri otvorení aplikácie.

Ak by ste mali navigovať do O obrazovky z Domov na obrazovke, aplikácia stlačí O na stoh, takže sedí na vrchu Domov. Podobne aplikácia presunie každú novú obrazovku, na ktorú prejdete, do zásobníka.

Ak sa teraz chcete vrátiť na predchádzajúcu obrazovku, aplikácia vytiahne aktuálnu obrazovku zo zásobníka a zobrazí vám tú pod ňou. Toto správanie je podobné tomu, čo sa stane, keď kliknete na ikonu „späť“ vo vašom webovom prehliadači.

S jasným pochopením mechanizmu navigácie zásobníka je teraz čas nastaviť ho v aplikácii React Native.

1. Nainštalujte React Navigation pre natívne aplikácie

Ak chcete začať, nainštalujte Navigačný balík React pre natívne aplikácie vo vašom projekte React Native vykonaním tohto príkazu na termináli:

npm i @reagovať-navigácia/natívny

Vyžaduje balík, ktorý ste práve nainštalovali Reagovať Native Stack a React Native Screens správne bežať. Ak chcete nainštalovať RN Stack, spustite:

npm i @reagovať-navigácia/natívny-stoh

Ak chcete nainštalovať druhý, spustite toto:

npm reagujem-natívny-obrazovky

Teraz máte všetko, čo potrebujete, aby ste mohli začať vytvárať navigačný mechanizmus vo vašej aplikácii. Ďalším krokom je nastavenie obrazoviek.

2. Nastavte obrazovku vo svojej aplikácii React Native

V tomto príklade vytvoríme iba dve obrazovky – domovskú obrazovku a obrazovku Informácie.

Vytvorte priečinok s názvom obrazovky v koreňovom adresári vašej aplikácie. Potom v adresári vytvorte dva súbory s názvom HomeScreen.js a AboutScreen.js obrazovky.

Čo pridať do súboru HomeScreen.js

Otvorte súbor HomeScreen.js a začnite importovaním nasledujúceho:

importovať * ako Reagovať od'reagovať';
importovať { Text, View, StyleSheet, TouchableOpacity } od„react-native“;
importovať { useState } od'reagovať'

Ďalej vytvorte funkčný komponent HomeScreen a pristupujte k navigačnému objektu pomocou dekonštrukcie objektu (ako je uvedené v Reagujte na osvedčené postupy), potom vráťte názov a tlačidlo na navigáciu na obrazovku Informácie:

exportpredvolenáfunkciuDomovská obrazovka({navigácia}) { 
vrátiť ( 
<vyhliadkaštýl={styles.container}>
<Textštýl={styles.paragraph}> Domovská obrazovka Text>
 titul="Prejsť na O mne"
 onPress={() => navigation.navigate('AboutScreen')} 
 /> 
vyhliadka>
 );
}

Tu hovoríme React Native, do ktorého má prejsť O keď používateľ stlačí tlačidlo. V tomto prípade na obrazovku neodovzdávame žiadne údaje. Ale predpokladajme, že chcete odovzdať dáta funkcii; takto by ste to urobili:

exportpredvolenáfunkciuDomovská obrazovka({navigácia}) { 
konšt údaje = { websiteName: "John's Tech" }
vrátiť ( 
<vyhliadkaštýl={styles.container}>
// Text ide sem 
 titul="Prejsť na O mne"
 onPress={() => navigation.navigate('AboutScreen', údaje)} 
 /> 
vyhliadka>
 );
}

Teraz, keď stlačíte tlačidlo, tento kód odošle údaje na ďalšiu obrazovku, O. Vnútri AboutScreen.js súbor, môžete pristupovať k údajom z trasy a zobraziť ich v používateľskom rozhraní.

Čo pridať do súboru AboutScreen.js

Otvorte súbor AboutScreen.js a začnite importovaním nasledujúcich závislostí:

importovať * ako Reagovať od'reagovať';
importovať { Text, View, Style Sheet, Button } od„react-native“;

Ďalej vytvorte AboutScreen funkčný komponent, ktorý preberá údaje z trasa.param vlastnosť a vráti údaje v používateľskom rozhraní:

exportpredvolenáfunkciuAboutScreen({route}) { 
nech dataObj = route.params
vrátiť ( 
<vyhliadkaštýl={styles.container}>
<Textštýl={styles.paragraph}>
 Toto je obrazovka Informácie o {dataObj.websiteName} 
Text>
vyhliadka>
 );
}

Ak si pamätáte, špecifikovali sme jednu vlastnosť v dátovom objekte s názvom websiteName, ktorý teraz vykreslíme vo vnútri komponent. Do objektu môžete pridať toľko vlastností, koľko chcete, a pristupovať k nim v komponente cieľových obrazoviek.

Ďalším krokom je nastavenie nášho navigátora zásobníka s dvoma obrazovkami.

3. Prepojenie obrazoviek s navigátorom zásobníkov

V rámci App.js začnite importovaním nasledujúcich závislostí:

importovať * ako Reagovať od'reagovať';
importovať Domovská obrazovka od'./screens/HomeScreen'
importovať AboutScreen od'./screens/AboutScreen'
importovať { NavigationContainer } od"@react-navigation/native"
importovať { createNativeStackNavigator } od"@react-navigation/native-stack"

Na riadkoch dva a tri sme importovali dve obrazovky, ktoré sme práve vytvorili. Potom sme importovali Navigačný kontajner

od @react-navigation/native a createNativeStackNavigator od @react-navigation/native-stack aby nám pomohli spojiť obrazovky.

Ďalej zavolajte createNativeStackNavigator na získanie zásobníka:

konšt Stack = createNativeStackNavigator()

To nám umožňuje „naskladať“ obrazovky, medzi ktorými chcete v aplikácii prechádzať.

Vytvorte funkciu komponentu aplikácie a vráťte obe obrazovky do ako je ukázané nižšie. Uistite sa, že ste ho zabalili do alebo to nebude fungovať:

exportpredvolenáfunkciuApp() { 
vrátiť ( 
<Navigačný kontajner>
<Stoh. Navigátor>
<Stoh. Obrazovkanázov="Domovská obrazovka"komponent = {Domovská obrazovka} />
<Stoh. Obrazovkanázov="O obrazovke"komponent = {AboutScreen} />
Stoh. Navigátor>
Navigačný kontajner>
 );
}

Tento kód umiestni obrazovku HomeScreen na vrch zásobníka, čo znamená, že aplikácia po dokončení načítania najskôr vykreslí komponent Home.

Teraz je všetko nastavené. Aplikáciu môžete otestovať kliknutím na Prejdite na O mne tlačidlo na domovskom používateľskom rozhraní. Toto by vás malo presmerovať na O, a nájdete websiteName vlastnosť zobrazená v používateľskom rozhraní:

Najlepšia vec na používaní React Navigation for Native je, že sa tak ľahko nastavuje a používa. Nevyžaduje žiadne ďalšie konfigurácie (okrem požadovaných knižníc, ktoré ste nainštalovali), a môžete sa tiež pripojiť rôzne typy Paywallov (ak máte v úmysle vytvoriť aplikáciu založenú na predplatnom).

Zistite viac o React Native

React Native je multiplatformový rámec na vytváranie aplikácií, ktoré fungujú na zariadeniach so systémom Android a iOS. O React Native je toho veľa, čo sa môžete naučiť, a ak ste novým rámcom, mali by ste začať tým, že sa naučíte základy.