Ako vytvoriť mobilný navigačný systém s navigáciou React

Mobilné aplikácie by mali mať navigačný systém, ktorý používateľov bez námahy prevedie rôznymi obrazovkami a funkciami.

React Navigation, výkonná a flexibilná navigačná knižnica pre React Native, vám môže pomôcť vytvoriť tento zážitok. Využitím jeho schopností môžete bez námahy zostaviť skvelý mobilný navigačný systém.

Inštalácia React Navigation Library

React Navigation ponúka tri hlavné navigačné vzory, menovite navigáciu Stack, Tab a Drawer na vytvorenie navigačného systému. Tieto vzory navigácie poskytujú rámec na organizáciu a správu navigácie medzi rôznymi obrazovkami v rámci vašej aplikácie.

Ak chcete začať používať React Navigation, nainštalujte knižnicu a jej potrebné závislosti:

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

Nastavenie navigátora

Každý navigátor v rámci React Navigation žije vo svojej samostatnej knižnici. Ak chcete použiť ktorýkoľvek z navigátorov, budete ich musieť nainštalovať jednotlivo.

Dobre premyslená štruktúra projektu je užitočná pri zostavovaní navigačného systému pre vašu mobilnú aplikáciu. Dobrou praxou je vytvoriť src priečinok v koreňovom adresári vášho projektu. V tomto priečinku by ste mali mať a obrazovky priečinok. To poslúži na oddelenie komponentov obrazovky od ostatných komponentov.

Budete písať kód na nastavenie navigačného vzoru, ktorý používate vo svojom projekte App.js súbor.

Vytvorenie navigátora vo vnútri App.js súbor je najlepším postupom z niekoľkých dôvodov:

• The App.js súbor je zvyčajne komponent najvyššej úrovne v aplikácii React Native. Definovanie navigátora v tomto súbore zaistí, že hierarchia navigácie bude na najvyššej úrovni stromu komponentov a bude prístupná všade.
• Umiestnením navigátora do App.js umožňuje jednoduchý prístup a odovzdávanie stavu a rekvizít celej aplikácie na obrazovky v rámci navigátora.
• React Navigation's Navigačný kontajner poskytuje potrebný kontext pre navigáciu a zvyčajne sa nachádza vo vnútri App.js. Umiestnením Navigátora do rovnakého súboru ho môžete jednoducho integrovať s Navigačný kontajner.

Navigátor zásobníkov

Stack Navigator je najobľúbenejší navigačný vzor v rámci knižnice React Navigation. Používa zásobníkovú dátovú štruktúru, kde každá obrazovka je úplne odlišný komponent a je naskladaná na predchádzajúcu.

Keď sa nová obrazovka zatlačí na vrch zásobníka, stane sa aktívnou obrazovkou a predchádzajúca obrazovka sa hodí pod ňu. To umožňuje používateľom prechádzať tam a späť cez zásobník, ako je tok navigácie webovej stránky. Môžeš nastaviť navigátor zásobníka na prechod z jednej obrazovky na druhú.

Napríklad:

importovať Reagovať od'reagovať';
importovať { NavigationContainer } od'@react-navigation/native';
importovať { createStackNavigator } od'@react-navigation/stack';
// Importujte komponenty obrazovky
importovať Domovská obrazovka od'./screens/HomeScreen';
importovať Podrobnosti Obrazovka od'./screens/DetailsScreen';
konšt Stack = createStackNavigator();
konšt Aplikácia = () => {
vrátiť (


"Domov" komponent={HomeScreen} />
"podrobnosti" komponent={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exportpredvolená App;

Vyššie uvedený blok kódu vytvorí komponent Stack Navigator pomocou createStackNavigator() z navigačnej knižnice.

V tomto príklade má Stack Navigator dve obrazovky: Domov a Podrobnosti.

Teraz nainštalujte Stack Navigator:

npm install @react-navigation/stack

Vnútri Domovská obrazovka, môžete použiť navigácia objekt na testovanie navigátora zásobníka:

importovať { StyleSheet, View, Button } od"reaktívny";
importovať Reagovať od"reagovať";
konšt Hlavná obrazovka = ({ navigácia }) => {
vrátiť (

 titul="Navigovať na .."
 onPress={() => navigation.navigate("Obrazovka podrobností")}
 />
 </View>
 );
};
exportpredvolená Domovská obrazovka;
konšt styles = StyleSheet.create({});

Všimnite si, ako Stack Navigator automaticky vytvorí tlačidlo so šípkou na ovládanie navigácie späť na predchádzajúce obrazovky.

Navigátor kariet

V niektorých situáciách neposkytuje navigačný systém tam a späť, ako je Stack Navigator, skvelý zážitok. Pre tieto prípady je vhodnejší Tab Navigator. Zobrazuje navigačné obrazovky, ktoré má používateľ k dispozícii vopred, a môže sa jednoduchšie používať, ako webový navigačný panel.

Ak chcete začať, nainštalujte @react-navigation/bottom-tabs pomocou knižnice správca balíkov NPM.

s createBottomNavigator(), môžete vytvoriť inštanciu Tab Navigator, ako ste to urobili s Stack Navigator:

importovať { createBottomTabNavigator } od'@react-navigation/bottom-tabs';
konšt Tab = createBottomTabNavigator();

A potom definujte obrazovky, ktoré chcete ako karty v rámci navigátora a Navigačný kontajner:

exportpredvolenáfunkciuApp() {
vrátiť (


 meno="Domov"
 komponent={HomeScreen}
 možnosti={{ titul: "Domov" }}
 />
 meno="profil"
 komponent={ProfileScreen}
 možnosti={{ titul: "profil" }}
 />
 meno="podrobnosti"
 komponent={DetailScreen}
 možnosti={{ titul: "podrobnosti" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Pri spustení aplikácie by ste mali vidieť navigátor kariet s vašimi definovanými obrazovkami v spodnej časti.

Mohli by ste použiť tabBarPosition omožnosť umiestniť navigátora na top, správny, vľavo, alebo dno (predvolené).

Navigátor zásuviek

Zásuvkové navigátory alebo zásuvky sú bežným navigačným vzorom v mobilných aplikáciách. Zásuvky môžete otvoriť potiahnutím alebo klepnutím na tlačidlo. To spôsobí, že zásuvka sa zasunie z bočnej strany obrazovky a odhalí jej obsah.

Ak chcete používať aplikáciu Drawer Navigator, nainštalujte ju spolu s reagovať-native-geste-handler a reaktívny-native-reanimated:

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

Budete tiež musieť nakonfigurovať reanimáciu vo svojom vnútri babel.config.js súbor:

modul.exports = {
 predvoľby: ["babel-preset-expo"],
 pluginy: ["react-native-reanimated/plugin"],
};

Tu je príklad, ako nastaviť aplikáciu Drawer Navigator:

importovať"react-native-gesture-handler"; // Tento import musí byť navrchu
importovať { Zobraziť, text, tlačidlo } od"reaktívny";
importovať { createDrawerNavigator } od"@react-navigation/drawer";
importovať { NavigationContainer } od"@react-navigation/native";
konšt Drawer = createDrawerNavigator();
konšt Obsah zásuvky = ({ navigácia }) => {
vrátiť (
flex: 1, alignItems: "stred", justifyContent: "stred" }}>
veľkosť písma: 24, hmotnosť písma: "tučné" }}>
 Vitajte v Zásuvke
 </Text>

 Toto je ďalší obsah, ktorý môžete zobraziť v zásuvku.
 </Text>
"Zavrieť zásuvku" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konšt Aplikácia = () => (

 initialRouteName="Domov"
 zásuvkaObsah={(rekvizity) => <Obsah zásuvky {...rekvizity} />}
 >
 {/* Vaše ďalšie obrazovky tu */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exportpredvolená App;

V tomto príklade Obsah zásuvky komponent sa odovzdáva ako zásuvkaObsah podoprieť sa createDrawerNavigator. Vnútri Obsah zásuvky môžete prispôsobiť obsah tak, aby zobrazoval požadované informácie pomocou textových komponentov alebo akýchkoľvek iných prvkov a štýlu.

Navigátory kariet sú statické a vždy viditeľné. To nie je vždy najlepšie, pretože karty blokujú časti obrazovky a môžu odviesť pozornosť od hlavnej obrazovky. Môžete použiť zásuvky ako dynamický navigátor kariet a vytvoriť navigačnú ponuku v rámci zásuviek. Používatelia potom môžu otvoriť zásuvku a nájsť navigačnú ponuku.

Môžete tiež použiť zásuvku na zobrazenie ďalšieho obsahu, ako je vyhľadávací panel, používateľský profil, kontextové informácie alebo čokoľvek, čo nevyžaduje zobrazenie na celú obrazovku.

Zvážte tieto osvedčené postupy, aby ste z aplikácie Drawer Navigator vyťažili maximum:

• Vyhnite sa zahlteniu zásuvky príliš veľkým množstvom možností a zamerajte sa na prezentáciu najrelevantnejších a najčastejšie používaných funkcií.
• Logicky a intuitívne kategorizujte súvisiace položky, aby ste používateľom pomohli rýchlo nájsť to, čo hľadajú.
• Použite ikony alebo vizuálne indikátory, ktoré pomôžu používateľom pochopiť účel každej položky v zásuvke.

Odovzdávanie údajov pomocou navigačných prvkov

React Navigation poskytuje výkonný mechanizmus, ktorý vám umožňuje prenášať údaje cez navigačné rekvizity.

Predstavte si scenár, v ktorom máte zoznam položiek na jednej obrazovke a keď používateľ vyberie položku, chcete príslušné údaje odovzdať na inú obrazovku.

Najprv musíte definovať štruktúru navigácie. Teraz, aby sme odovzdali údaje z Domovská obrazovka do a Obrazovka podrobností keď je vybratá položka, vnútri Domovská obrazovka definujte funkciu, ktorá obsluhuje navigáciu a obsahuje údaje, ktoré chcete odovzdať.

importovať Reagovať od'reagovať';
importovať { Zobraziť, text, tlačidlo } od„react-native“;
konšt Hlavná obrazovka = ({ navigácia }) => {
konšt handleItemPress = (položka) => {
 navigácia.navigate('DetailScreen', { položka });
 };
vrátiť (

Zoznam z Položky</Text>
"Položka 1" onPress={() => handleItemPress("Údaje položky 1")} />
"položka 2" onPress={() => handleItemPress("Údaje položky 2")} />
 </View>
 );
};
exportpredvolená Domovská obrazovka;

The handleItemPress funkcia využíva navigácia.navigovať spôsob navigácie na Obrazovka podrobností pri odovzdávaní údajov o vybranej položke ako parametra v druhom argumente.

Aby ste mali prístup k odovzdaným údajom vo vnútri Obrazovka podrobností komponent, budete potrebovať navigácia podpera:

importovať Reagovať od'reagovať';
importovať { View, Text } od„react-native“;
konšt Obrazovka podrobností = ({ navigácia }) => {
konšt item = navigation.getParam('položka', '');
vrátiť (

Obrazovka podrobností</Text>
{item}</Text>
 </View>
 );
};
exportpredvolená Obrazovka podrobností;

Tu, Obrazovka podrobností použitie komponentov navigácia.getParam na získanie odovzdanej položky z navigačných rekvizít. V tomto príklade je nastavená predvolená hodnota prázdneho reťazca pre prípad, že údaje nie sú dostupné. Vaša aplikácia tak pri vykresľovaní nezlyhá.

V závislosti od zložitosti vašej aplikácie môžete preskúmať pomocou knižníc správy štátu, ako je Redux alebo kontextové API na globálne spravovanie a zdieľanie údajov.

Usporiadanie vášho navigačného kódu

Správne usporiadanie navigačného kódu vám pomôže vytvoriť škálovateľnú a kolaboratívnu aplikáciu React Native. Môžete to urobiť rozdelením navigačnej logiky na spravovateľné moduly. Uľahčí to čítanie a pochopenie.

Vďaka tomu si môžete byť istí, že vytvoríte bezproblémovú navigáciu pre svojich používateľov a zároveň si vychutnáte skúsenosti s vývojom.