Cum să construiți un sistem de navigație mobil cu React Navigation

Aplicațiile mobile ar trebui să aibă un sistem de navigare care să ghideze utilizatorii fără efort prin diferite ecrane și funcționalități.

React Navigation, o bibliotecă de navigare puternică și flexibilă pentru React Native, vă poate ajuta să creați acea experiență. Valorificând capacitățile sale, puteți construi fără efort un sistem de navigație mobil excelent.

Instalarea bibliotecii de navigare React

React Navigation oferă trei modele principale de navigare, și anume navigarea Stack, Tab și Drawer pentru construirea unui sistem de navigație. Aceste modele de navigare oferă un cadru pentru organizarea și gestionarea navigației între diferite ecrane din aplicația dvs.

Pentru a începe să utilizați React Navigation, instalați biblioteca și dependențele necesare:

npm install @react-navigation/native
npm instalează react-native-screens react-native-safe-zona-context

Configurarea unui navigator

Fiecare navigator din React Navigation locuiește în propria bibliotecă separată. Pentru a utiliza oricare dintre navigatoare, va trebui să le instalați individual.

O structură de proiect bine gândită este utilă atunci când construiți un sistem de navigare pentru aplicația dvs. mobilă. O bună practică este crearea unui src folderul din directorul rădăcină al proiectului. În acest folder, ar trebui să aveți un ecrane pliant. Acest lucru va servi pentru a separa componentele ecranului de alte componente.

Veți scrie codul pentru a configura modelul de navigare pe care îl utilizați în proiectul dvs App.js fişier.

Crearea unui navigator în interiorul App.js fișierul este cea mai bună practică din mai multe motive:

• The App.js fișierul este de obicei componenta de nivel superior într-o aplicație React Native. Definirea Navigatorului în acest fișier va asigura că ierarhia de navigare se află la cel mai înalt nivel al arborelui componente și este accesibilă pe tot parcursul.
• Plasarea Navigatorului în App.js fișierul vă permite să accesați și să transmiteți cu ușurință starea la nivelul aplicației și elementele de recuzită către ecranele din navigator.
• React Navigation's Navigation Container oferă contextul necesar pentru navigare și se află de obicei în interior App.js. Prin plasarea Navigatorului în același fișier, îl puteți integra cu ușurință cu Navigation Container.

Stack Navigator

Stack Navigator este cel mai popular model de navigare din biblioteca React Navigation. Folosește o structură de date stivă în care fiecare ecran este o componentă complet diferită și este stivuită deasupra celui precedent.

Când un nou ecran este împins deasupra stivei, acesta devine ecranul activ, iar ecranul anterior este aruncat sub el. Acest lucru permite utilizatorilor să navigheze înainte și înapoi prin stivă, ca fluxul de navigare al unui site web. Puteți configurați navigatorul de stivă pentru a trece de la un ecran la altul.

De exemplu:

import Reacţiona din'reacţiona';
import { Navigation Container } din„@react-navigation/native”;
import { createStackNavigator } din„@react-navigation/stack”;
// Importă componentele ecranului
import Ecranul de start din„./screens/HomeScreen”;
import Detalii Ecran din„./screens/DetailsScreen”;
const Stivă = createStackNavigator();
const Aplicație = () => {
întoarcere (


"Acasă" component={Ecran de pornire} />
"Detalii" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exportMod implicit Aplicație;

Blocul de cod de mai sus creează o componentă Stack Navigator folosind createStackNavigator() din biblioteca de navigare.

În acest exemplu, Stack Navigator are două ecrane: Acasă și Detalii.

Acum instalați Stack Navigator:

npm install @react-navigation/stack

Interior Ecranul de start, puteți folosi navigare obiect pentru a testa Stack Navigator:

import { StyleSheet, View, Button } din"react-nativ";
import Reacţiona din"reacţiona";
const Ecran de pornire = ({ navigare }) => {
întoarcere (

 titlu="Navigheaza catre .."
 onPress={() => navigation.navigate(„Ecran de detalii”)}
 />
 </View>
 );
};
exportMod implicit Ecranul de start;
const stiluri = StyleSheet.create({});

Observați cum Stack Navigator creează automat un buton săgeată pentru a gestiona navigarea înapoi la ecranele anterioare.

Navigator de file

În unele situații, a avea un sistem de navigare dus-întors precum Stack Navigator nu oferă o experiență grozavă. Un Navigator Tab este mai potrivit pentru aceste cazuri. Afișează ecranele de navigare disponibile în avans pentru utilizator și poate fi mai ușor de utilizat, ca o bară de navigare web.

Pentru a începe, instalați @react-navigation/bottom-files bibliotecă folosind managerul de pachete NPM.

Cu createBottomNavigator(), puteți crea o instanță a Navigatorului Tab așa cum ați făcut cu Navigatorul Stivă:

import { createBottomTabNavigator } din„@react-navigation/bottom-tabs”;
const Tab = createBottomTabNavigator();

Și apoi, definiți ecranele pe care le doriți ca file în navigator și Navigation Container:

exportMod implicitfuncţieApp() {
întoarcere (


 nume="Acasă"
 component={Ecran de pornire}
 opțiuni={{ titlu: "Acasă" }}
 />
 nume="Profil"
 component={ProfileScreen}
 opțiuni={{ titlu: "Profil" }}
 />
 nume="Detalii"
 component={Ecran de detaliu}
 opțiuni={{ titlu: "Detalii" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Când rulați aplicația, ar trebui să vedeți un Navigator de file cu ecranele definite în partea de jos.

Ai putea folosi tabBarPosition oopțiune pentru a poziționa navigatorul la top, dreapta, stânga, sau fund (Mod implicit).

Drawer Navigator

Drawer Navigatoarele sau sertarele sunt un model de navigare comun în aplicațiile mobile. Puteți deschide sertarele glisând sau atingând un buton. Acest lucru face ca sertarul să alunece din partea laterală a ecranului, dezvăluind conținutul său.

Pentru a utiliza Drawer Navigator, instalați-l împreună cu reacționează-native-gesture-handler și reacţionează-nativ-reanimat:

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

De asemenea, va trebui să configurați reanimat în interiorul dvs babel.config.js fişier:

modul.exports = {
 presetari: ["babel-preset-expo"],
 pluginuri: [„react-native-reanimated/plugin”],
};

Iată un exemplu despre cum să configurați un Drawer Navigator:

import"reacționează-native-gesture-handler"; // Acest import trebuie să fie în partea de sus
import { Vizualizare, Text, Buton } din"react-nativ";
import { createDrawerNavigator } din„@react-navigation/sertar”;
import { Navigation Container } din„@react-navigation/native”;
const Drawer = createDrawerNavigator();
const DrawerContent = ({ navigare }) => {
întoarcere (
contracta: 1, alignItems: "centru", justifyContent: "centru" }}>
marimea fontului: 24, grosimea fontului: "îndrăzneţ" }}>
 Bun venit la Sertar
 </Text>

 Acesta este un conținut suplimentar pe care îl puteți afișa în sertarul.
 </Text>
„Închide sertarul” onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
const Aplicație = () => (

 initialRouteName="Acasă"
 drawerContent={(recuzită) => <Conținutul sertarului {...recuzită} />}
 >
 {/* Celelalte ecrane ale tale aici */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exportMod implicit Aplicație;

În acest exemplu, Conținutul sertarului componenta este trecută ca Conținutul sertarului prop la createDrawerNavigator. În interiorul Conținutul sertarului componentă, puteți personaliza conținutul pentru a afișa informațiile dorite folosind componente de text sau orice alte elemente și stil.

Navigatoarele de file sunt statice și întotdeauna vizibile. Acest lucru nu este întotdeauna cel mai bun, deoarece filele blochează părți ale ecranului și pot îndepărta focalizarea de pe ecranul principal. Puteți utiliza sertare ca navigator de file dinamic și puteți crea un meniu de navigare în sertare. Utilizatorii pot deschide apoi sertarul pentru a găsi un meniu de navigare.

De asemenea, puteți utiliza sertarul pentru a afișa conținut suplimentar, cum ar fi o bară de căutare, un profil de utilizator, informații contextuale sau orice altceva care nu necesită o vizualizare pe ecran complet.

Luați în considerare aceste bune practici pentru a profita la maximum de Drawer Navigator:

• Evitați să copleșiți sertarul cu prea multe opțiuni și concentrați-vă pe prezentarea celor mai relevante și frecvent utilizate funcții.
• Clasificați articolele asociate în mod logic și intuitiv pentru a ajuta utilizatorii să găsească rapid ceea ce caută.
• Utilizați pictograme sau indicatori vizuali pentru a ajuta utilizatorii să înțeleagă scopul fiecărui articol din sertar.

Transmiterea datelor cu elemente de navigare

React Navigation oferă un mecanism puternic care vă permite să treceți date prin elementele de recuzită de navigare.

Luați în considerare un scenariu în care aveți o listă de articole pe un ecran și, când un utilizator selectează un articol, doriți să transmiteți datele corespunzătoare pe alt ecran.

În primul rând, trebuie să definiți structura de navigare. Acum, pentru a transmite date de la Ecranul de start la a Ecran de detalii când este selectat un articol, în interior Ecranul de start definiți o funcție care se ocupă de navigare și include datele pe care doriți să le transmiteți.

import Reacţiona din'reacţiona';
import { Vizualizare, Text, Buton } din„reacționează-nativ”;
const Ecran de pornire = ({ navigare }) => {
const handleItemPress = (articol) => {
 navigation.navigate(„Ecran de detalii”, { item });
 };
întoarcere (

Listă de Articole</Text>
„Articol 1” onPress={() => handleItemPress(„Datele articolului 1”)} />
„Articol 2” onPress={() => handleItemPress(„Datele articolului 2”)} />
 </View>
 );
};
exportMod implicit Ecranul de start;

The handleItemPress funcția utilizează navigare.navigare metoda de a naviga la Ecran de detalii în timp ce se transmite datele elementului selectat ca parametru în al doilea argument.

Pentru a putea accesa datele transmise în interiorul Ecran de detalii componentă, veți avea nevoie de navigare recuzită:

import Reacţiona din'reacţiona';
import { Vizualizare, Text } din„reacționează-nativ”;
const DetailScreen = ({ navigare }) => {
const item = navigation.getParam('articol', '');
întoarcere (

Ecran de detaliu</Text>
{articol}</Text>
 </View>
 );
};
exportMod implicit Detaliu Ecran;

Aici Ecran de detalii utilizări ale componentelor navigation.getParam pentru a prelua elementul transmis din recuzita de navigare. În acest exemplu, o valoare implicită a unui șir gol este setată în cazul în care datele nu sunt disponibile. În acest fel, aplicația dvs. nu se va bloca la randare.

În funcție de complexitatea aplicației dvs., puteți explora folosind biblioteci de management de stat precum Redux sau API-ul context pentru a gestiona și a partaja datele la nivel global.

Organizarea codului de navigare

Organizarea corectă a codului de navigare vă va ajuta să construiți o aplicație React Native scalabilă și colaborativă. Puteți face acest lucru prin defalcarea logicii de navigare în module gestionabile. Acest lucru va face ușor de citit și de înțeles.

Cu aceasta, puteți fi sigur că veți crea o navigare perfectă pentru utilizatorii dvs., în timp ce vă bucurați de experiența de dezvoltare.