Zjistěte, jak můžete vytvořit spolehlivý navigační systém pro aplikaci React Native pomocí knihovny React Navigation.

Mobilní aplikace by měly mít navigační systém, který uživatele bez námahy provede různými obrazovkami a funkcemi.

React Navigation, výkonná a flexibilní navigační knihovna pro React Native, vám může pomoci vytvořit tento zážitek. Využitím jeho schopností můžete bez námahy vytvořit skvělý mobilní navigační systém.

Instalace React Navigation Library

React Navigation nabízí tři hlavní navigační vzory, jmenovitě navigaci Stack, Tab a Drawer pro vytvoření navigačního systému. Tyto vzory navigace poskytují rámec pro organizaci a správu navigace mezi různými obrazovkami v rámci vaší aplikace.

Chcete-li začít používat React Navigation, nainstalujte knihovnu a její nezbytné závislosti:

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

Nastavení navigátoru

Každý navigátor v rámci React Navigation žije ve své vlastní samostatné knihovně. Chcete-li používat kterýkoli z navigátorů, budete je muset nainstalovat jednotlivě.

instagram viewer

Dobře promyšlená struktura projektu je užitečná při sestavování navigačního systému pro vaši mobilní aplikaci. Dobrou praxí je vytvořit src složku v kořenovém adresáři vašeho projektu. Uvnitř této složky byste měli mít a obrazovky složku. To bude sloužit k oddělení komponent obrazovky od ostatních komponent.

Budete psát kód pro nastavení navigačního vzoru, který používáte ve svém projektu App.js soubor.

Vytvoření Navigátoru uvnitř App.js soubor je nejlepší postup z několika důvodů:

  • The App.js soubor je obvykle komponentou nejvyšší úrovně v aplikaci React Native. Definování Navigátoru v tomto souboru zajistí, že hierarchie navigace bude na nejvyšší úrovni stromu komponent a bude přístupná v celém rozsahu.
  • Umístěním Navigátoru do App.js umožňuje snadný přístup a předávání stavu a rekvizit v celé aplikaci na obrazovky v rámci navigátoru.
  • Reagovat Navigace Navigační kontejner poskytuje nezbytný kontext pro navigaci a je obvykle umístěn uvnitř App.js. Umístěním Navigátoru do stejného souboru jej můžete snadno integrovat s Navigační kontejner.

Navigátor zásobníku

Stack Navigator je nejoblíbenější navigační vzor v rámci knihovny React Navigation. Využívá datovou strukturu zásobníku, kde každá obrazovka je zcela odlišná součást a je naskládána na předchozí.

Když je nová obrazovka zatlačena na horní část zásobníku, stane se aktivní obrazovkou a předchozí obrazovka se vrhne pod ni. To uživatelům umožňuje procházet zásobníkem tam a zpět, jako je tok navigace na webu. Můžeš nastavit navigátor zásobníku pro přechod z jedné obrazovky na druhou.

Například:

import Reagovat z'reagovat';
import { NavigationContainer } z'@react-navigation/native';
import { createStackNavigator } z'@react-navigation/stack';
// Import komponent obrazovky
import Domovská obrazovka z'./screens/HomeScreen';
import Podrobnosti Obrazovka z'./screens/DetailsScreen';


konst Stack = createStackNavigator();


konst Aplikace = () => {
vrátit se (


"Domov" komponenta={HomeScreen} />
"Podrobnosti" komponenta={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
vývoznívýchozí Aplikace;

Výše uvedený blok kódu vytvoří komponentu Stack Navigator pomocí createStackNavigator() z navigační knihovny.

V tomto příkladu má Stack Navigator dvě obrazovky: Domov a Podrobnosti.

Nyní nainstalujte Stack Navigator:

npm install @react-navigation/stack

Uvnitř Domovská obrazovka, můžete použít navigace objekt pro testování Navigátoru zásobníku:

import { StyleSheet, View, Button } z"reakční";
import Reagovat z"reagovat";
konst HomeScreen = ({ navigace }) => {
vrátit se (

 titul="Navigovat do .."
 onPress={() => navigation.navigate("Obrazovka podrobností")}
 />
 </View>
 );
};


vývoznívýchozí Domovská obrazovka;
konst styly = StyleSheet.create({});
2 obrázky

Všimněte si, jak Stack Navigator automaticky vytváří tlačítko se šipkou pro ovládání zpět na předchozí obrazovky.

Navigátor karet

V některých situacích neposkytuje systém navigace tam a zpět, jako je Stack Navigator, skvělý zážitek. Pro tyto případy je vhodnější Tab Navigator. Zobrazuje navigační obrazovky, které má uživatel k dispozici předem, a lze je snadněji používat, jako webová navigační lišta.

Chcete-li začít, nainstalujte @react-navigation/bottom-tabs pomocí knihovny správce balíčků NPM.

S createBottomNavigator(), můžete vytvořit instanci Navigátoru karet stejně jako u Navigátoru zásobníku:

import { createBottomTabNavigator } z'@react-navigation/bottom-tabs';
konst Tab = createBottomTabNavigator();

A poté definujte obrazovky, které chcete jako karty v navigátoru a Navigační kontejner:

vývoznívýchozífunkceAplikace() {
vrátit se (


 jméno="Domov"
 komponenta={HomeScreen}
 možnosti={{ titul: "Domov" }}
 />
 jméno="Profil"
 komponenta={ProfileScreen}
 možnosti={{ titul: "Profil" }}
 />
 jméno="Podrobnosti"
 komponenta={DetailScreen}
 možnosti={{ titul: "Podrobnosti" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Při spuštění aplikace byste měli vidět Navigátor karet s vámi definovanými obrazovkami ve spodní části.

3 obrázky

Mohli byste použít tabBarPosition omožnost umístit navigátor na horní, že jo, vlevo, odjetnebo dno (výchozí).

Navigátor zásuvek

Navigátory zásuvek nebo zásuvek jsou běžným navigačním vzorem v mobilních aplikacích. Zásuvky můžete otevřít přejetím nebo klepnutím na tlačítko. To způsobí, že zásuvka zasune ze strany obrazovky a odhalí její obsah.

2 obrázky

Chcete-li používat nástroj Drawer Navigator, nainstalujte jej spolu s reagovat-nativní-gesto-handler a reagent-native-reanimated:

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

Budete také muset nakonfigurovat reanimated uvnitř vašeho babel.config.js soubor:

modul.exports = {
 předvolby: ["babel-preset-expo"],
 pluginy: ["react-native-reanimated/plugin"],
};

Zde je příklad, jak nastavit aplikaci Drawer Navigator:

import"react-native-gesture-handler"; // Tento import musí být nahoře
import { Zobrazit, text, tlačítko } z"reakční";
import { createDrawerNavigator } z"@react-navigation/drawer";
import { NavigationContainer } z"@react-navigation/native";


konst Drawer = createDrawerNavigator();


konst Obsah zásuvky = ({ navigace }) => {
vrátit se (
flex: 1, alignItems: "centrum", justifyContent: "centrum" }}>
velikost písma: 24, hmotnost písma: "tučně" }}>
 Vítejte v šuplíku
 </Text>

 Toto je nějaký další obsah, který můžete zobrazit v kreslíř.
 </Text>


konst Aplikace = () => (

 initialRouteName="Domov"
 drawerContent={(rekvizity) => <Obsah zásuvky {...rekvizity} />}
 >
 {/* Vaše další obrazovky zde */}
 </Drawer.Navigator>
 </NavigationContainer>
);
vývoznívýchozí Aplikace;

V tomto příkladu je Obsah zásuvky komponenta je předána jako zásuvkaObsah podpírat createDrawerNavigator. Uvnitř Obsah zásuvky můžete upravit obsah tak, aby zobrazoval požadované informace pomocí textových komponent nebo jakýchkoli jiných prvků a stylů.

Navigátory karet jsou statické a vždy viditelné. To není vždy nejlepší, protože karty blokují části obrazovky a mohou odvádět pozornost od hlavní obrazovky. Můžete použít zásuvky jako dynamický navigátor karet a vytvořit v nich navigační nabídku. Uživatelé pak mohou otevřít zásuvku a najít navigační nabídku.

Zásuvku můžete také použít k zobrazení dalšího obsahu, jako je vyhledávací panel, uživatelský profil, kontextové informace nebo cokoli, co nevyžaduje zobrazení na celou obrazovku.

Zvažte tyto osvědčené postupy, abyste z aplikace Drawer Navigator vytěžili maximum:

  • Vyhněte se zahlcení zásuvky příliš mnoha možnostmi a zaměřte se na prezentaci nejrelevantnějších a nejčastěji používaných funkcí.
  • Logicky a intuitivně kategorizujte související položky, abyste uživatelům pomohli rychle najít to, co hledají.
  • Použijte ikony nebo vizuální indikátory, které uživatelům pomohou pochopit účel každé položky v zásuvce.

Předávání dat pomocí navigačních rekvizit

React Navigation poskytuje výkonný mechanismus, který vám umožňuje předávat data prostřednictvím navigačních prvků.

Zvažte scénář, kdy máte seznam položek na jedné obrazovce a když uživatel vybere položku, chcete předat odpovídající data na jinou obrazovku.

Nejprve musíte definovat strukturu navigace. Nyní k předání dat z Domovská obrazovka do a Obrazovka podrobností když je vybrána položka, uvnitř Domovská obrazovka definovat funkci, která obsluhuje navigaci a zahrnuje data, která chcete předat.

import Reagovat z'reagovat';
import { Zobrazit, text, tlačítko } z'react-native';
konst HomeScreen = ({ navigace }) => {
konst handleItemPress = (položka) => {
 navigace.navigovat('DetailScreen', { položka });
 };


vrátit se (

Seznam z Položky</Text>
vývoznívýchozí Domovská obrazovka;

The handleItemPress funkce využívá navigace.navigovat způsob navigace do Obrazovka podrobností při předávání dat vybrané položky jako parametru ve druhém argumentu.

Chcete-li mít přístup k předávaným datům uvnitř Obrazovka podrobností komponentu, budete potřebovat navigace podpěra:

import Reagovat z'reagovat';
import { Zobrazit, Text } z'react-native';
konst Obrazovka podrobností = ({ navigace }) => {
konst item = navigation.getParam('položka', '');


vrátit se (

Obrazovka podrobností</Text>
{item}</Text>
 </View>
 );
};
vývoznívýchozí Obrazovka podrobností;

Tady, Obrazovka podrobností použití komponent navigace.getParam k načtení předané položky z navigačních rekvizit. V tomto příkladu je nastavena výchozí hodnota prázdného řetězce pro případ, že data nejsou k dispozici. Vaše aplikace tak při vykreslování nespadne.

V závislosti na složitosti vaší aplikace můžete prozkoumat pomocí knihoven správy stavu, jako je Redux nebo kontextové API pro globální správu a sdílení dat.

Uspořádání vašeho navigačního kódu

Správné uspořádání navigačního kódu vám pomůže vytvořit škálovatelnou a spolupracující aplikaci React Native. Můžete to udělat rozdělením logiky navigace na spravovatelné moduly. To usnadní čtení a pochopení.

Díky tomu si můžete být jisti, že vytvoříte bezproblémovou navigaci pro své uživatele a zároveň si budete užívat vývojářské zkušenosti.