Sådan navigerer du mellem skærme i en React Native-app

Ofte, når du bygger en React Native-app, komponerer du den fra forskellige skærme som Login, Home og About. Du skal derefter implementere en navigationsmekanisme, så dine brugere kan navigere i appen og få adgang til dens individuelle skærme i den rigtige rækkefølge.

Formålet med denne tutorial er at lede dig gennem processen med at konfigurere et navigationssystem i din React Native-applikation. Dette inkluderer installation af biblioteket, tilføjelse af dine skærme til staknavigatoren og sammenkobling af skærmbilleder fra hver af dine komponenter.

Før du begynder

For at følge denne vejledning på din lokale computer skal du have følgende installeret:

• Node.js v10 eller nyere
• Xcode eller Android Studio (konfigureret til at køre emulatoren)
• Reager Native CLI

For trin-for-trin instruktioner om, hvordan du opsætter dit React Native-udviklingsmiljø, kan du læse officielle React Native opsætningsdokumentation.

Før du begynder at se på, hvordan du implementerer navigation i vores React Native-app, lad os forstå, hvordan staknavigationsmekanismen fungerer i React Native.

Forstå, hvordan staknavigation fungerer

Forestil dig, at din React Native-applikation er en stak. I første omgang, på den stak, har du Hjem, som er den første skærm, der viser, når du åbner appen.

Hvis du skulle navigere til Om skærm fra Hjem skærm, ville appen skubbe Om på stakken, så den sidder ovenpå Hjem. På samme måde skubber appen hver ny skærm, du navigerer til, ind på stakken.

Nu, hvis du vil gå tilbage til den forrige skærm, springer appen din nuværende skærm fra stakken og viser dig den nedenunder. Denne adfærd svarer til, hvad der sker, når du klikker på "tilbage"-ikonet i din webbrowser.

Med en klar forståelse af staknavigationsmekanismen er det nu tid til at konfigurere den i en React Native-app.

1. Installer React Navigation til Native Apps

For at komme i gang skal du installere React navigationspakke for native apps i dit React Native-projekt ved at udføre denne kommando på en terminal:

npm i @reagere-navigation/hjemmehørende

Den pakke du lige har installeret kræver Reager Native Stack og Reager Native-skærme at køre ordentligt. For at installere RN Stack skal du køre:

npm i @reagere-navigation/hjemmehørende-stak

For at installere den anden, kør dette:

npm jeg reagerer-hjemmehørende-skærme

Nu har du alt, hvad du behøver for at begynde at oprette navigationsmekanismen i din applikation. Det næste trin er at opsætte skærmene.

2. Konfigurer skærmen i din React Native-app

For dette eksempel vil vi kun oprette to skærme - startskærmen og om skærmen.

Opret en mappe med navnet skærme inde i dit programs rodmappe. Bagefter skal du oprette to filer med navnet HomeScreen.js og AboutScreen.js inde i mappen skærme.

Hvad skal du tilføje til din HomeScreen.js-fil

Åbn filen HomeScreen.js og start med at importere følgende:

importere * som Reagere fra'reagere';
importere { Text, View, StyleSheet, TouchableOpacity } fra'reager-native';
importere { useState } fra'reagere'

Opret derefter HomeScreen funktionelle komponent og få adgang til navigationsobjektet ved hjælp af objektdekonstruktion (som pr Reager bedste praksis), returner derefter en titel og knap for at navigere til skærmen Om:

eksportStandardfungereStartskærmen({navigation}) { 
Vend tilbage ( 
<Udsigtstil={styles.container}>
<Tekststil={styles.paragraph}> Startskærmen Tekst>
 titel="Gå til Om"
 onPress={() => navigation.navigate('About Screen')} 
 /> 
Udsigt>
 );
}

Her fortæller vi React Native at navigere til Om når en bruger trykker på knappen. I dette tilfælde videregiver vi ingen data til skærmen. Men antag, at du vil videregive data til funktionen; sådan gør du:

eksportStandardfungereStartskærmen({navigation}) { 
konst data = { webstedsnavn: "John's Tech" }
Vend tilbage ( 
<Udsigtstil={styles.container}>
// Tekst går her 
 titel="Gå til Om"
 onPress={() => navigation.navigate('About Screen', data)} 
 /> 
Udsigt>
 );
}

Når du nu trykker på knappen, sender denne kode dataene til den næste skærm, Om. Inde i AboutScreen.js fil, kan du få adgang til dataene fra ruten og vise dem på brugergrænsefladen.

Hvad skal du tilføje til din AboutScreen.js-fil

Åbn AboutScreen.js-filen, og start med at importere følgende afhængigheder:

importere * som Reagere fra'reagere';
importere { Text, View, StyleSheet, Button } fra'reager-native';

Dernæst skal du oprette AboutScreen funktionel komponent, der tager data fra route.params egenskab og returnerer dataene i brugergrænsefladen:

eksportStandardfungereAboutScreen({rute}) { 
lade dataObj = rute.params
Vend tilbage ( 
<Udsigtstil={styles.container}>
<Tekststil={styles.paragraph}>
 Det her er skærmen Om på {dataObj.websiteName} 
Tekst>
Udsigt>
 );
}

Hvis du husker det, specificerede vi en enkelt egenskab i det navngivne dataobjekt webstedsnavn, som vi nu gengiver inde i komponent. Du kan tilføje så mange egenskaber, som du vil, i objektet, og få adgang til dem inde i målskærmskomponenten.

Næste trin er at opsætte vores staknavigator med de to skærme.

3. Tilslutning af skærmene med Stack Navigator

Start med at importere følgende afhængigheder inde i App.js:

importere * som Reagere fra'reagere';
importere Startskærmen fra'./skærme/HomeScreen'
importere AboutScreen fra'./skærme/AboutScreen'
importere { NavigationContainer } fra"@react-navigation/native"
importere { createNativeStackNavigator } fra"@react-navigation/native-stack"

På linje to og tre importerede vi de to skærme, vi lige har oprettet. Så importerede vi Navigationscontainer

fra @reager-navigation/native og createNativeStackNavigator fra @react-navigation/native-stack for at hjælpe os med at forbinde skærmene.

Næste, ring createNativeStackNavigator for at hente stakken:

konst Stack = createNativeStackNavigator()

Dette giver os mulighed for at "stable" de skærme, du ønsker at skifte imellem, i din app.

Opret app-komponentfunktionen og returner begge skærme i som vist nedenfor. Sørg for at pakke den ind i ellers virker det ikke:

eksportStandardfungereApp() { 
Vend tilbage ( 
<Navigationscontainer>
<Stak. Navigator>
<Stak. Skærmnavn="Startskærmen"komponent = {Startskærmen} />
<Stak. Skærmnavn="Om skærm"komponent = {AboutScreen} />
Stak. Navigator>
Navigationscontainer>
 );
}

Denne kode placerer HomeScreen-skærmen oven på stakken, hvilket betyder, at appen først gengiver Home-komponenten, når den er færdig med at indlæse.

Nu er alt indstillet. Du kan teste appen ved at klikke på Gå til Om knappen på Home UI. Dette bør omdirigere dig til Om, og du vil finde webstedsnavn egenskab vist i brugergrænsefladen:

Det bedste ved at bruge React Navigation for Native er, at det er så nemt at konfigurere og bruge. Det kræver ingen ekstra konfigurationer (udover de nødvendige biblioteker, du har installeret), og du kan også oprette forbindelse forskellige typer betalingsvægge (hvis du har til hensigt at bygge en abonnementsbaseret app).

Lær mere om React Native

React Native er en cross-platform framework til at skabe applikationer, der kører på Android- og iOS-enheder. Der er så meget at lære om React Native, og hvis du er ny til at bruge rammerne, bør du starte med at lære det grundlæggende.