Hvordan navigere mellom skjermer i en React Native-app

Når du bygger en React Native-app, vil du ofte komponere den fra forskjellige skjermer som Logg inn, Hjem og Om. Du må da implementere en navigasjonsmekanisme slik at brukerne dine kan navigere i appen og få tilgang til dens individuelle skjermer i riktig rekkefølge.

Hensikten med denne opplæringen er å lede deg gjennom prosessen med å sette opp et navigasjonssystem i din React Native-applikasjon. Dette inkluderer å installere biblioteket, legge til skjermene dine i stabelnavigatoren og koble sammen skjermene fra hver av komponentene dine.

Før du begynner

For å følge denne opplæringen på din lokale datamaskin, må du ha følgende installert:

• Node.js v10 eller nyere
• Xcode eller Android Studio (sett opp til å kjøre emulatoren)
• Reager Native CLI

For trinnvise instruksjoner om hvordan du setter opp React Native-utviklingsmiljøet ditt, kan du lese offisielle React Native dokumentasjon for oppsett.

Før du begynner å se på hvordan du implementerer navigasjon i vår React Native-app, la oss forstå hvordan stabelnavigasjonsmekanismen fungerer i React Native.

Forstå hvordan stabelnavigering fungerer

Tenk deg at React Native-applikasjonen din er en stabel. Til å begynne med, på den stabelen, har du Hjem, som er den første skjermen som vises når du åpner appen.

Hvis du skulle navigere til Om skjermen fra Hjem skjermen, ville appen presse Om på stabelen, så den sitter på toppen av Hjem. På samme måte skyver appen hver ny skjerm du navigerer til på stabelen.

Nå, hvis du vil gå tilbake til forrige skjerm, spretter appen din nåværende skjerm fra stabelen og viser deg den under den. Denne oppførselen ligner på det som skjer når du klikker på "tilbake"-ikonet i nettleseren din.

Med en klar forståelse av stabelnavigasjonsmekanismen, er det nå på tide å sette den opp i en React Native-app.

1. Installer React Navigation for Native Apps

For å komme i gang, installer React navigasjonspakke for native apper i ditt React Native-prosjekt ved å utføre denne kommandoen på en terminal:

npm i @reagere-navigasjon/innfødt

Pakken du nettopp installerte krever Reager Native Stack og Reager innfødte skjermer å kjøre skikkelig. For å installere RN Stack, kjør:

npm i @reagere-navigasjon/innfødt-stable

For å installere den andre, kjør dette:

npm jeg reagerer-innfødt-skjermer

Nå har du alt du trenger for å begynne å lage navigasjonsmekanismen i applikasjonen din. Neste trinn er å sette opp skjermene.

2. Sett opp skjermen i din React Native-app

For dette eksemplet vil vi bare lage to skjermer - startskjermen og om-skjermen.

Opprett en mappe med navnet skjermer inne i programmets rotkatalog. Etterpå lager du to filer som heter HomeScreen.js og AboutScreen.js inne i katalogen skjermer.

Hva du skal legge til i HomeScreen.js-filen

Åpne HomeScreen.js-filen og start med å importere følgende:

import * som Reagere fra'reagere';
import { Text, View, StyleSheet, TouchableOpacity } fra'reager-innfødt';
import { useState } fra'reagere'

Deretter oppretter du HomeScreen-funksjonskomponenten og får tilgang til navigasjonsobjektet ved å bruke objektdekonstruksjon (i henhold til Reager beste praksis), returner deretter en tittel og knapp for å navigere til Om-skjermen:

eksportmisligholdefunksjonStartskjermen({navigasjon}) { 
komme tilbake ( 
<Utsiktstil={styles.container}>
<Tekststil={styles.paragraph}> Startskjermen Tekst>
 tittel="Gå til Om"
 onPress={() => navigation.navigate("About Screen")} 
 /> 
Utsikt>
 );
}

Her forteller vi React Native å navigere til Om når en bruker trykker på knappen. I dette tilfellet sender vi ingen data til skjermen. Men anta at du vil sende data til funksjonen; slik gjør du det:

eksportmisligholdefunksjonStartskjermen({navigasjon}) { 
konst data = { nettstednavn: "John's Tech" }
komme tilbake ( 
<Utsiktstil={styles.container}>
// Tekst går her 
 tittel="Gå til Om"
 onPress={() => navigation.navigate("About Screen", data)} 
 /> 
Utsikt>
 );
}

Nå når du trykker på knappen, sender denne koden dataene til neste skjerm, Om. Inne i AboutScreen.js fil, kan du få tilgang til dataene fra ruten og vise dem på brukergrensesnittet.

Hva du skal legge til i AboutScreen.js-filen

Åpne AboutScreen.js-filen og start med å importere følgende avhengigheter:

import * som Reagere fra'reagere';
import { Tekst, Vis, Stilark, Knapp } fra'reager-innfødt';

Deretter oppretter du AboutScreen funksjonell komponent som tar inn data fra route.params egenskap og returnerer dataene i brukergrensesnittet:

eksportmisligholdefunksjonAboutScreen({rute}) { 
la dataObj = rute.params
komme tilbake ( 
<Utsiktstil={styles.container}>
<Tekststil={styles.paragraph}>
 Dette er Om-skjermen til {dataObj.websiteName} 
Tekst>
Utsikt>
 );
}

Hvis du husker, spesifiserte vi en enkelt egenskap i dataobjektet som ble navngitt nettstednavn, som vi nå gjengir inne i komponent. Du kan legge til så mange egenskaper du vil i objektet, og få tilgang til dem inne i målskjermkomponenten.

Neste trinn er å sette opp stabelnavigatoren vår med de to skjermene.

3. Koble til skjermene med Stack Navigator

Inne i App.js, start med å importere følgende avhengigheter:

import * som Reagere fra'reagere';
import Startskjermen fra'./skjermer/Hjemskjerm'
import AboutScreen fra'./screens/AboutScreen'
import { NavigationContainer } fra"@react-navigation/native"
import { createNativeStackNavigator } fra"@react-navigation/native-stack"

På linje to og tre importerte vi de to skjermene vi nettopp har laget. Så importerte vi Navigasjonsbeholder

fra @reager-navigasjon/native og createNativeStackNavigator fra @react-navigation/native-stack for å hjelpe oss med å koble sammen skjermene.

Deretter ringer du createNativeStackNavigator for å hente stakken:

konst Stack = createNativeStackNavigator()

Dette lar oss "stabler" skjermene du ønsker å gå mellom i appen din.

Opprett app-komponentfunksjonen og returner begge skjermbildene i som vist under. Sørg for å pakke den inn i eller det vil ikke fungere:

eksportmisligholdefunksjonApp() { 
komme tilbake ( 
<Navigasjonsbeholder>
<Stable. Navigator>
<Stable. SkjermNavn="Startskjermen"komponent = {Startskjermen} />
<Stable. SkjermNavn="About Screen"komponent = {AboutScreen} />
Stable. Navigator>
Navigasjonsbeholder>
 );
}

Denne koden plasserer HomeScreen-skjermen på toppen av stabelen, noe som betyr at appen først vil gjengi Home-komponenten når den er ferdig lastet.

Nå er alt klart. Du kan teste appen ved å klikke på Gå til Om knappen på Home UI. Dette bør omdirigere deg til Om, og du vil finne nettstednavn egenskap som vises i brukergrensesnittet:

Det beste med å bruke React Navigation for Native er at det er så enkelt å sette opp og bruke. Det krever ingen ekstra konfigurasjoner (i tillegg til de nødvendige bibliotekene du installerte), og du kan også koble til forskjellige typer betalingsmurer (hvis du har tenkt å bygge en abonnementsbasert app).

Lær mer om React Native

React Native er et rammeverk på tvers av plattformer for å lage applikasjoner som kjører på Android- og iOS-enheter. Det er så mye å lære om React Native, og hvis du er ny på å bruke rammeverket, bør du begynne med å lære det grunnleggende.