A verem-navigátor használatával minimális kóddal az alkalmazás egyik képernyőről a másikra válthat.

A React Native alkalmazás létrehozásakor gyakran különböző képernyőkről állítja össze azt, például a Bejelentkezés, a Kezdőlap és a Névjegy képernyőkről. Ezután be kell vezetnie egy navigációs mechanizmust, hogy a felhasználók a megfelelő sorrendben navigálhassanak az alkalmazásban, és hozzáférhessenek annak egyes képernyőihez.

Ennek az oktatóanyagnak az a célja, hogy végigvezeti Önt a navigációs rendszer beállításának folyamatán a React Native alkalmazásban. Ez magában foglalja a könyvtár telepítését, a képernyők hozzáadását a verem-navigátorhoz, valamint a képernyők összekapcsolását az egyes összetevőkből.

Mielőtt elkezded

Az oktatóprogram helyi számítógépén való követéséhez telepítenie kell a következőket:

  • Node.js v10 vagy újabb
  • Xcode vagy Android Studio (beállítás az emulátor futtatására)
  • React Native CLI

A React Native fejlesztői környezet beállítására vonatkozó lépésről lépésre vonatkozó utasításokért olvassa el a hivatalos React Native beállítási dokumentáció.

instagram viewer

Mielőtt elkezdené megvizsgálni, hogyan lehet megvalósítani a navigációt a React Native alkalmazásunkban, ismerjük meg, hogyan működik a verem-navigációs mechanizmus a React Native alkalmazásban.

A verem-navigáció működésének megértése

Képzelje el, hogy a React Native alkalmazás egy verem. Kezdetben azon a veremön van itthon, amely az alkalmazás megnyitásakor megjelenő első képernyő.

Ha a Ról ről képernyőről a itthon képernyőt, az alkalmazás megnyomná Ról ről a veremre, így a tetejére ül itthon. Hasonlóképpen, az alkalmazás minden új képernyőt, amelyre navigál, a verembe helyez.

Most, ha vissza szeretne térni az előző képernyőre, az alkalmazás előugrik az aktuális képernyőt a veremből, és megmutatja az alatta lévőt. Ez a viselkedés hasonló ahhoz, ami akkor történik, amikor a böngészőben a "vissza" ikonra kattint.

A verem-navigációs mechanizmus világos megértésével itt az ideje beállítani azt egy React Native alkalmazásban.

1. Telepítse a React Navigációt a natív alkalmazásokhoz

A kezdéshez telepítse a React navigációs csomag a React Native projektben lévő natív alkalmazásokhoz a következő parancs végrehajtásával egy terminálon:

npm i @reagál-navigáció/anyanyelvi

Az imént telepített csomag szükséges React Native Stack és React Native Screens rendesen futni. Az RN Stack telepítéséhez futtassa:

npm i @reagál-navigáció/anyanyelvi-Kazal

A második telepítéséhez futtassa a következőt:

npm reagálok-anyanyelvi- képernyők

Most már mindent megtalál, amire szüksége van a navigációs mechanizmus létrehozásához az alkalmazásban. A következő lépés a képernyők beállítása.

2. Állítsa be a képernyőt a React Native alkalmazásban

Ebben a példában csak két képernyőt fogunk létrehozni – a kezdőképernyőt és a névjegy képernyőt.

Hozzon létre egy nevű mappát képernyők az alkalmazás gyökérkönyvtárában. Ezután hozzon létre két HomeScreen.js és AboutScreen.js nevű fájlt a könyvtárban képernyők.

Mit kell hozzáadni a HomeScreen.js fájlhoz

Nyissa meg a HomeScreen.js fájlt, és kezdje a következő importálásával:

import * mint Reagál tól től'reagál';
import { Szöveg, Nézet, Stíluslap, Touchable Opacity } tól től"react-native";
import { useState } tól től'reagál'

Ezután hozza létre a HomeScreen funkcionális komponenst, és objektum-dekonstrukcióval érje el a navigációs objektumot (ahogyan az Reagáljon a legjobb gyakorlatokra), majd adja meg a címet és a gombot a névjegy képernyőre való navigáláshoz:

exportalapértelmezettfunkcióKezdőképernyő({navigáció}) { 
Visszatérés ( 
<Kilátásstílus={styles.container}>
<Szövegstílus={styles.paragraph}> Kezdőképernyő Szöveg>
 cím="Ugrás a névjegyhez"
 onPress={() => navigation.navigate("AboutScreen")} 
 /> 
Kilátás>
 );
}

Itt azt mondjuk a React Native-nak, hogy navigáljon Ról ről amikor a felhasználó megnyomja a gombot. Ebben az esetben semmilyen adatot nem adunk át a képernyőnek. De tegyük fel, hogy akarod adatokat továbbít a függvénynek; a következőképpen csinálnád:

exportalapértelmezettfunkcióKezdőképernyő({navigáció}) { 
const adat = { websiteName: "John's Tech" }
Visszatérés ( 
<Kilátásstílus={styles.container}>
// Ide megy a szöveg 
 cím="Ugrás a névjegyhez"
 onPress={() => navigation.navigate("AboutScreen", adatok)} 
 /> 
Kilátás>
 );
}

Most, amikor megnyomja a gombot, ez a kód továbbítja az adatokat a következő képernyőre, Ról ről. Benne AboutScreen.js fájlt, elérheti az útvonal adatait, és megjelenítheti azokat a felhasználói felületen.

Mit adjunk hozzá az AboutScreen.js fájlhoz?

Nyissa meg az AboutScreen.js fájlt, és kezdje a következő függőségek importálásával:

import * mint Reagál tól től'reagál';
import { Szöveg, Nézet, Stíluslap, Gomb } tól től"react-native";

Ezután hozza létre a AboutScreen funkcionális komponens, amely adatokat fogad be a útvonal.params tulajdonságot, és visszaadja az adatokat a felhasználói felületen:

exportalapértelmezettfunkcióAboutScreen({útvonal}) { 
hagyja dataObj = route.params
Visszatérés ( 
<Kilátásstílus={styles.container}>
<Szövegstílus={styles.paragraph}>
 Ez van a {dataObj.websiteName} Névjegy képernyője 
Szöveg>
Kilátás>
 );
}

Ha emlékszik, egyetlen tulajdonságot adtunk meg a nevezett adatobjektumban websiteName, amelyet most a belsejében jelenítünk meg összetevő. Tetszőleges számú tulajdonságot adhat hozzá az objektumhoz, és elérheti őket a célképernyők komponensen belül.

A következő lépés a két képernyős verem-navigátor beállítása.

3. Képernyők összekapcsolása a Stack Navigatorral

Az App.js fájlban kezdje a következő függőségek importálásával:

import * mint Reagál tól től'reagál';
import Kezdőképernyő tól től'./screens/HomeScreen'
import AboutScreen tól től'./screens/AboutScreen'
import { NavigationContainer } tól től"@react-navigation/native"
import { CreateNativeStackNavigator } tól től"@react-navigation/native-stack"

A második és harmadik sorban importáltuk az imént létrehozott két képernyőt. Aztán importáltunk NavigationContainer

tól től @react-navigation/native és createNativeStackNavigator tól től @react-navigation/native-stack hogy segítsünk összekapcsolni a képernyőket.

Ezután hívjon createNativeStackNavigator a verem lekéréséhez:

const Stack = createNativeStackNavigator()

Ez lehetővé teszi számunkra, hogy „egymásba rakjuk” azokat a képernyőket, amelyek között át szeretne váltani az alkalmazásban.

Hozza létre az App komponens funkciót, és adja vissza mindkét képernyőt a az alábbiak szerint. Ügyeljen arra, hogy csomagolja be a vagy nem megy:

exportalapértelmezettfunkcióApp() { 
Visszatérés ( 
<NavigationContainer>
<Kazal. Navigátor>
<Kazal. Képernyőnév="Kezdőképernyő"összetevő = {Kezdőképernyő} />
<Kazal. Képernyőnév="AboutScreen"összetevő = {AboutScreen} />
Kazal. Navigátor>
NavigationContainer>
 );
}

Ez a kód a HomeScreen képernyőt a verem tetejére helyezi, ami azt jelenti, hogy az alkalmazás először a Home komponenst jeleníti meg, amikor befejeződik a betöltés.

Most minden be van állítva. Az alkalmazást a gombra kattintva tesztelheti Lépjen a Névjegy oldalra gombot a Home UI-n. Ennek át kell irányítania ide Ról ről, és megtalálja a websiteName a felhasználói felületen megjelenő tulajdonság:

2 kép

A React Navigation for Native használatában az a legjobb, hogy nagyon könnyű beállítani és használni. Nem igényel további konfigurációkat (a telepített szükséges könyvtárakon kívül), és csatlakozhat is különböző típusú fizetési falak (ha előfizetés alapú alkalmazást kíván építeni).

További információ a React Native szolgáltatásról

A React Native egy többplatformos keretrendszer Android- és iOS-eszközökön futó alkalmazások létrehozására. Annyi mindent meg kell tanulni a React Native-ről, és ha még nem ismeri a keretrendszert, kezdje az alapok elsajátításával.