Lær hvordan du kan bygge et solid navigasjonssystem for React Native-appen din ved å bruke React Navigation-biblioteket.

Mobilapper bør ha et navigasjonssystem som guider brukerne uanstrengt gjennom ulike skjermer og funksjoner.

React Navigation, et kraftig og fleksibelt navigasjonsbibliotek for React Native, kan hjelpe deg med å skape den opplevelsen. Ved å utnytte dens evner kan du enkelt konstruere et flott mobilt navigasjonssystem.

Installere React Navigation Library

React Navigation tilbyr tre hovednavigasjonsmønstre, nemlig Stack-, Tab- og Drawer-navigasjon for å bygge et navigasjonssystem. Disse navigasjonsmønstrene gir et rammeverk for å organisere og administrere navigasjon mellom forskjellige skjermer i appen din.

For å komme i gang med React Navigation, installer biblioteket og dets nødvendige avhengigheter:

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

Sette opp en navigator

Hver navigator i React Navigation bor i sitt eget separate bibliotek. For å bruke noen av navigatorene, må du installere dem individuelt.

instagram viewer

En gjennomtenkt prosjektstruktur er nyttig når du bygger et navigasjonssystem for mobilappen din. En god praksis er å lage en src mappen i prosjektets rotkatalog. Inne i denne mappen bør du ha en skjermer mappe. Dette vil tjene til å skille skjermkomponentene fra andre komponenter.

Du vil skrive ut koden for å sette opp navigasjonsmønsteret du bruker i prosjektet ditt App.js fil.

Opprette en navigator inne i App.js fil er en god praksis av flere grunner:

  • De App.js fil er vanligvis toppnivåkomponenten i en React Native-app. Å definere Navigator i denne filen vil sikre at navigasjonshierarkiet er på komponenttreet ditt høyeste nivå og tilgjengelig overalt.
  • Plassere Navigator i App.js fil lar deg enkelt få tilgang til og sende ned app-omfattende tilstand og rekvisitter til skjermene i navigatoren.
  • Reager Navigasjon Navigasjonsbeholder gir den nødvendige konteksten for navigasjon og er vanligvis plassert inne App.js. Ved å plassere Navigator i samme fil, kan du enkelt integrere den med Navigasjonsbeholder.

Stack Navigator

Stack Navigator er det mest populære navigasjonsmønsteret i React Navigation-biblioteket. Den bruker en stabeldatastruktur der hver skjerm er en helt annen komponent og er stablet oppå den forrige.

Når en ny skjerm skyves på toppen av stabelen, blir den den aktive skjermen, og den forrige skjermen kastes under den. Dette lar brukere navigere frem og tilbake gjennom stabelen, som et nettsteds navigasjonsflyt. Du kan sette opp stabelnavigatoren til å gå fra en skjerm til en annen.

For eksempel:

import Reagere fra'reagere';
import { NavigationContainer } fra'@react-navigation/native';
import { createStackNavigator } fra'@react-navigation/stack';
// Importer skjermkomponentene dine
import Startskjermen fra'./skjermer/Hjemskjerm';
import Detaljer Skjerm fra'./screens/DetailsScreen';


konst Stack = createStackNavigator();


konst App = () => {
komme tilbake (


"Hjem" component={HomeScreen} />
"Detaljer" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
eksportmisligholde App;

Kodeblokken ovenfor oppretter en Stack Navigator-komponent ved hjelp av createStackNavigator() fra navigasjonsbiblioteket.

I dette eksemplet har Stack Navigator to skjermer: Hjem og Detaljer.

Installer nå Stack Navigator:

npm installer @react-navigation/stack

Innsiden Startskjermen, kan du bruke navigasjon objekt for å teste Stack Navigator:

import { StyleSheet, View, Button } fra"reager-innfødt";
import Reagere fra"reagere";
konst Hjemmeskjerm = ({ navigasjon }) => {
komme tilbake (

 tittel="Navigere til .."
 onPress={() => navigation.navigate("Detaljskjerm")}
 />
 </View>
 );
};


eksportmisligholde Startskjermen;
konst styles = StyleSheet.create({});
2 bilder

Legg merke til hvordan Stack Navigator automatisk oppretter en pilknapp for å håndtere tilbakenavigering til de forrige skjermbildene.

Fanenavigator

I noen situasjoner gir det ikke en god opplevelse å ha et frem-og-tilbake-navigasjonssystem som Stack Navigator. En Tab Navigator er bedre egnet for disse tilfellene. Den viser navigasjonsskjermene tilgjengelig på forhånd for brukeren og kan være enklere å bruke, som en nettnavigasjonslinje.

For å komme i gang, installer @react-navigation/bottom-tabs bibliotek ved hjelp av NPM-pakkebehandleren.

Med createBottomNavigator(), kan du opprette en forekomst av Tab Navigator slik du gjorde med Stack Navigator:

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

Og definer deretter skjermene du vil ha som faner i navigatoren og Navigasjonsbeholder:

eksportmisligholdefunksjonApp() {
komme tilbake (


 navn="Hjem"
 component={Hjemskjerm}
 alternativer={{ tittel: "Hjem" }}
 />
 navn="Profil"
 component={ProfileScreen}
 alternativer={{ tittel: "Profil" }}
 />
 navn="Detaljer"
 component={DetailScreen}
 alternativer={{ tittel: "Detaljer" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Når du kjører appen din, bør du se en Tab Navigator med de definerte skjermene dine nederst.

3 bilder

Du kan bruke tabBarPosition oalternativet for å plassere navigatoren ved topp, Ikke sant, venstre, eller bunn (misligholde).

Skuffnavigator

Skuffnavigatorer, eller skuffer, er et vanlig navigasjonsmønster i mobilapplikasjoner. Du kan åpne skuffene ved å sveipe eller trykke på en knapp. Dette får skuffen til å gli inn fra siden av skjermen, og avsløre innholdet.

2 bilder

For å bruke skuffenavigatoren, installer den sammen med reager-native-gest-handler og reagere-innfødt-reanimert:

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

Du må også konfigurere reanimert inne i din babel.config.js fil:

modul.exports = {
 forhåndsinnstillinger: ["babel-preset-expo"],
 plugins: ["reager-native-reanimated/plugin"],
};

Her er et eksempel på hvordan du setter opp en skuffnavigator:

import"reager-native-gest-handler"; // Denne importen må være øverst
import { Vis, tekst, knapp } fra"reager-innfødt";
import { createDrawerNavigator } fra"@react-navigation/drawer";
import { NavigationContainer } fra"@react-navigation/native";


konst Skuff = createDrawerNavigator();


konst DrawerContent = ({ navigasjon }) => {
komme tilbake (
bøye seg: 1, alignItems: "senter", begrunn innholdet: "senter" }}>
skriftstørrelse: 24, fontvekt: "dristig" }}>
 Velkommen til skuffen
 </Text>

 Dette er litt ekstra innhold som du kan vise i skuffen.
 </Text>


konst App = () => (

 initialRouteName="Hjem"
 drawerContent={(rekvisitter) => <Skuffinnhold {...Rekvisitter} />}
 >
 {/* Dine andre skjermer her */}
 </Drawer.Navigator>
 </NavigationContainer>
);
eksportmisligholde App;

I dette eksemplet er Skuffinnhold komponent passeres som skuffInnhold støtte til opprette DrawerNavigator. Inne i Skuffinnhold komponent, kan du tilpasse innholdet for å vise ønsket informasjon ved hjelp av tekstkomponenter eller andre elementer og stil.

Fanenavigatorer er statiske og alltid synlige. Dette er ikke alltid det beste, siden fanene blokkerer deler av skjermen og kan ta fokus bort fra hovedskjermen. Du kan bruke skuffer som en dynamisk fane-navigator og lage en navigasjonsmeny i skuffene. Brukere kan deretter åpne skuffen for å finne en navigasjonsmeny.

Du kan også bruke skuffen til å vise tilleggsinnhold som en søkelinje, en brukerprofil, kontekstuell informasjon eller noe som ikke krever fullskjermvisning.

Vurder disse beste fremgangsmåtene for å få mest mulig ut av skuffnavigatoren:

  • Unngå å overvelde skuffen med for mange alternativer og fokuser på å presentere de mest relevante og mest brukte funksjonene.
  • Kategoriser relaterte elementer logisk og intuitivt for å hjelpe brukere raskt å finne det de leter etter.
  • Bruk ikoner eller visuelle indikatorer for å hjelpe brukere å forstå formålet med hvert element i skuffen.

Sende data med navigasjonsrekvisitter

React Navigation gir en kraftig mekanisme som lar deg sende data gjennom navigasjonsrekvisitter.

Tenk på et scenario der du har en liste over elementer på én skjerm, og når en bruker velger et element, vil du sende de tilsvarende dataene til en annen skjerm.

Først må du definere navigasjonsstrukturen. Nå, for å sende data fra Startskjermen til en Detaljskjerm når et element er valgt, inne Startskjermen definere en funksjon som håndterer navigasjonen og inkluderer dataene du vil sende.

import Reagere fra'reagere';
import { Vis, tekst, knapp } fra'reager-innfødt';
konst Hjemmeskjerm = ({ navigasjon }) => {
konst handleItemPress = (punkt) => {
 navigation.navigate('Detaljskjerm', { element });
 };


komme tilbake (

Liste av Varer</Text>
eksportmisligholde Startskjermen;

De handleItemPress funksjonen bruker navigation.navigate metode for å navigere til Detaljskjerm mens du sender de valgte elementdataene som en parameter i det andre argumentet.

For å kunne få tilgang til de beståtte dataene inne i Detaljskjerm komponent, trenger du navigasjon rekvisitt:

import Reagere fra'reagere';
import { Vis, tekst } fra'reager-innfødt';
konst Detaljskjerm = ({ navigasjon }) => {
konst item = navigation.getParam('punkt', '');


komme tilbake (

Detaljskjerm</Text>
{item}</Text>
 </View>
 );
};
eksportmisligholde Detaljskjerm;

Her, den Detaljskjerm komponentbruk navigation.getParam for å hente det beståtte elementet fra navigasjonsrekvisittene. I dette eksemplet settes en standardverdi for en tom streng i tilfelle dataene ikke er tilgjengelige. På denne måten krasjer ikke appen din ved gjengivelse.

Avhengig av kompleksiteten til appen din, du kan utforske ved å bruke statlige administrasjonsbiblioteker som Redux eller kontekst-API for å administrere og dele data globalt.

Organisere navigasjonskoden din

Riktig organisering av navigasjonskoden vil hjelpe deg med å bygge en skalerbar og samarbeidende React Native-app. Du kan gjøre dette ved å bryte ned navigasjonslogikken i håndterbare moduler. Dette vil gjøre det enkelt å lese og forstå.

Med dette kan du være sikker på å lage sømløs navigasjon for brukerne dine mens du nyter utviklingsopplevelsen.