Hogyan építsünk fel mobil navigációs rendszert a React Navigation segítségével

A mobilalkalmazásoknak rendelkezniük kell olyan navigációs rendszerrel, amely könnyedén végigvezeti a felhasználókat a különböző képernyőkön és funkciókon.

A React Navigation, a React Native hatékony és rugalmas navigációs könyvtára segíthet az élmény megteremtésében. A képességek kihasználásával könnyedén építhet fel egy nagyszerű mobil navigációs rendszert.

A React Navigation Library telepítése

A React Navigation három fő navigációs mintát kínál, nevezetesen a Stack, Tab és Drawer navigációt a navigációs rendszer felépítéséhez. Ezek a navigációs minták keretet biztosítanak az alkalmazáson belüli különböző képernyők közötti navigáció megszervezéséhez és kezeléséhez.

A React Navigation használatának megkezdéséhez telepítse a könyvtárat és a szükséges függőségeit:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

Navigátor beállítása

A React Navigation minden navigátora saját külön könyvtárában él. Bármelyik navigátor használatához külön-külön kell telepítenie őket.

A jól átgondolt projektstruktúra hasznos, ha navigációs rendszert épít a mobilalkalmazásához. Egy jó gyakorlat egy src mappába a projekt gyökérkönyvtárában. Ebben a mappában kell lennie a képernyők mappát. Ez arra szolgál, hogy elkülönítse a képernyő összetevőit a többi összetevőtől.

Ki kell írnia a kódot a projektben használt navigációs minta beállításához App.js fájlt.

Navigátor létrehozása belül App.js A fájl több okból is bevált módszer:

• A App.js fájl általában a React Native alkalmazás legfelső szintű összetevője. A Navigátor ebben a fájlban történő meghatározása biztosítja, hogy a navigációs hierarchia az összetevőfa legmagasabb szintjén legyen, és mindenhol elérhető legyen.
• A Navigátor behelyezése a App.js fájl lehetővé teszi az alkalmazásszintű állapotok és kellékek egyszerű elérését és átadását a navigátor képernyőinek.
• React Navigation's NavigationContainer biztosítja a navigációhoz szükséges kontextust, és jellemzően belül található App.js. Ha a Navigátort ugyanabba a fájlba helyezi, könnyedén integrálhatja a NavigationContainer.

Stack Navigator

A Stack Navigator a legnépszerűbb navigációs minta a React Navigation könyvtárban. Egy verem adatstruktúrát használ, ahol minden képernyő teljesen más komponens, és az előző tetejére kerül.

Ha egy új képernyőt a verem tetejére tolnak, az aktív képernyővé válik, és az előző képernyő alá kerül. Ez lehetővé teszi a felhasználók számára, hogy oda-vissza navigáljanak a veremben, akár egy webhely navigációs folyamatában. tudsz állítsa be a verem-navigátort, hogy egyik képernyőről a másikra váltson.

Például:

import Reagál tól től'reagál';
import { NavigationContainer } tól től"@react-navigation/native";
import { CreateStackNavigator } tól től"@react-navigation/stack";
// Importálja a képernyő összetevőit
import Kezdőképernyő tól től'./screens/HomeScreen';
import Részletek Képernyő tól től'./screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
Visszatérés (


"Itthon" Component={HomeScreen} />
"Részletek" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exportalapértelmezett App;

A fenti kódblokk egy Stack Navigator komponenst hoz létre a használatával createStackNavigator() a navigációs könyvtárból.

Ebben a példában a Stack Navigator két képernyővel rendelkezik: itthon és Részletek.

Most telepítse a Stack Navigatort:

npm install @react-navigation/stack

Belül Kezdőképernyő, használhatja a navigáció objektum a Stack Navigator teszteléséhez:

import { Stíluslap, Nézet, Gomb } tól től"react-native";
import Reagál tól től"reagál";
const Kezdőképernyő = ({ navigáció }) => {
Visszatérés (

 cím="Navigate to .."
 onPress={() => navigation.navigate("DetailScreen")}
 />
 </View>
 );
};
exportalapértelmezett Kezdőképernyő;
const styles = StyleSheet.create({});

Figyelje meg, hogyan hoz létre a Stack Navigator automatikusan egy nyílgombot az előző képernyőkre való visszanavigáció kezelésére.

Lapnavigátor

Egyes helyzetekben egy oda-vissza navigációs rendszer, például a Stack Navigator nem nyújt nagy élményt. A Tab Navigator jobban megfelel ezekre az esetekre. Megjeleníti a felhasználó számára elérhető navigációs képernyőket, és könnyebben használható, mint egy webes navigációs sáv.

A kezdéshez telepítse a @react-navigation/bottom-tabs könyvtár használatával az NPM csomagkezelő.

Val vel createBottomNavigator(), létrehozhatja a Tab Navigator példányát, ahogyan a veremnavigátorral tette:

import { CreateBottomTabNavigator } tól től"@react-navigation/bottom-tabs";
const Tab = CreateBottomTabNavigator();

Ezután határozza meg a kívánt képernyőket lapokként a navigátorban és NavigationContainer:

exportalapértelmezettfunkcióApp() {
Visszatérés (


 név="Itthon"
 Component={HomeScreen}
 opciók={{ cím: "Itthon" }}
 />
 név="Profil"
 Component={ProfileScreen}
 opciók={{ cím: "Profil" }}
 />
 név="Részletek"
 komponent={DetailScreen}
 opciók={{ cím: "Részletek" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Az alkalmazás futtatásakor látnia kell egy lapnavigátort a meghatározott képernyőkkel az alján.

Használhatnád a tabBarPosition olehetőség, hogy a navigátort a tetejére, jobb, bal, vagy alsó (alapértelmezett).

Fiókos navigátor

A fióknavigátorok vagy fiókok gyakori navigációs minták a mobilalkalmazásokban. A fiókokat csúsztatással vagy egy gomb megérintésével nyithatja ki. Ez azt eredményezi, hogy a fiók a képernyő oldaláról becsúszik, felfedve a tartalmát.

A Drawer Navigator használatához telepítse együtt reagálni-bennszülött-gesztuskezelő és react-native-reanimált:

npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

Az újraélesztést is be kell állítania a saját belsejében babel.config.js fájl:

modult.exports = {
 előbeállítások: ["bábel-preset-expo"],
 bővítmények: ["react-native-reanimated/plugin"],
};

Íme egy példa a fióknavigátor beállítására:

import"react-native-gesture-handler"; // Ennek az importálásnak a tetején kell lennie
import { Nézet, szöveg, gomb } tól től"react-native";
import { CreateDrawerNavigator } tól től"@react-navigation/drawer";
import { NavigationContainer } tól től"@react-navigation/native";
const Fiók = CreateDrawerNavigator();
const DrawerContent = ({ navigáció }) => {
Visszatérés (
Flex: 1, alignItems: "központ", justifyContent: "központ" }}>
betűméret: 24, fontWeight: "bátor" }}>
 Üdvözöljük a Fiókban
 </Text>

 Ez néhány extra tartalom, amelyet megjeleníthet ban ben fiók.
 </Text>
"Zárja be a fiókot" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
const App = () => (

 kezdetiRouteName="Itthon"
 drawerContent={(kellékek) => <DrawerContent {... kellékek} />}
 >
 {/* A többi képernyő itt */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exportalapértelmezett App;

Ebben a példában a DrawerContent komponenst adjuk át a fiókTartalom támaszt CreateDrawerNavigator. Benne DrawerContent komponens, testreszabhatja a tartalmat, hogy a kívánt információkat jelenítse meg szöveges összetevők vagy bármilyen más elem és stílus segítségével.

A lapnavigátorok statikusak és mindig láthatóak. Ez nem mindig a legjobb, mivel a fülek blokkolják a képernyő egyes részeit, és elvonják a fókuszt a főképernyőről. A fiókokat dinamikus lapnavigátorként használhatja, és létrehozhat egy navigációs menüt a fiókokon belül. A felhasználók ezután kinyithatják a fiókot, hogy megtalálják a navigációs menüt.

A fiókot további tartalom megjelenítésére is használhatja, például keresősávot, felhasználói profilt, kontextuális információkat vagy bármit, ami nem igényel teljes képernyős nézetet.

Fontolja meg ezeket a bevált módszereket, hogy a legtöbbet hozza ki a fióknavigátorból:

• Kerülje el a fiók túl sok lehetőséggel való túlterhelését, és összpontosítson a legrelevánsabb és leggyakrabban használt funkciók bemutatására.
• A kapcsolódó elemek logikus és intuitív kategorizálása segít a felhasználóknak gyorsan megtalálni, amit keresnek.
• Használjon ikonokat vagy vizuális indikátorokat, hogy segítsen a felhasználóknak megérteni a fiókban lévő egyes tételek célját.

Adattovábbítás navigációs kellékekkel

A React Navigation hatékony mechanizmust biztosít, amely lehetővé teszi az adatok továbbítását a navigációs kellékeken.

Fontolja meg azt a forgatókönyvet, amelyben az elemek listája van az egyik képernyőn, és amikor a felhasználó kiválaszt egy elemet, át szeretné adni a megfelelő adatokat egy másik képernyőre.

Először is meg kell határoznia a navigációs szerkezetet. Most, hogy átadja az adatokat a Kezdőképernyő a DetailScreen ha egy elem ki van választva, belül Kezdőképernyő definiáljon egy funkciót, amely kezeli a navigációt és tartalmazza az átadni kívánt adatokat.

import Reagál tól től'reagál';
import { Nézet, szöveg, gomb } tól től"react-native";
const Kezdőképernyő = ({ navigáció }) => {
const handleItemPress = (tétel) => {
 navigation.navigate("DetailScreen", { elem });
 };
Visszatérés (

Lista nak,-nek Tételek</Text>
"1. elem" onPress={() => handleItemPress(„1. tétel adatai”)} />
"2. elem" onPress={() => handleItemPress(„2. tétel adatai”)} />
 </View>
 );
};
exportalapértelmezett Kezdőképernyő;

A handleItemPress funkció használja a navigáció.navigálni módszer a navigációhoz DetailScreen miközben a második argumentumban paraméterként adja át a kiválasztott elemadatokat.

Ahhoz, hogy hozzáférjen az átadott adatokhoz a DetailScreen komponens, szüksége lesz a navigáció támaszt:

import Reagál tól től'reagál';
import { Megtekintés, szöveg } tól től"react-native";
const DetailScreen = ({ navigáció }) => {
const item = navigation.getParam('tétel', '');
Visszatérés (

Részletek képernyő</Text>
{elem}</Text>
 </View>
 );
};
exportalapértelmezett DetailScreen;

Itt, a DetailScreen komponens felhasználások navigation.getParam az átadott elem lekéréséhez a navigációs kellékekből. Ebben a példában egy üres karakterlánc alapértelmezett értéke van beállítva arra az esetre, ha az adatok nem állnak rendelkezésre. Így az alkalmazás nem fog összeomlani megjelenítéskor.

Az alkalmazás összetettségétől függően felfedezheti az állapotkezelési könyvtárakat, például a Reduxot vagy a kontextus API-t az adatok globális kezeléséhez és megosztásához.

A navigációs kód rendszerezése

A navigációs kód megfelelő rendszerezése segít egy méretezhető és együttműködő React Native alkalmazás létrehozásában. Ezt úgy teheti meg, hogy a navigációs logikát kezelhető modulokra bontja. Így könnyen olvasható és érthető lesz.

Ezzel biztos lehet benne, hogy zökkenőmentes navigációt hoz létre a felhasználók számára, miközben élvezi a fejlesztési élményt.