Att använda en stacknavigator kan hjälpa din app att gå från en skärm till nästa, med ett minimum av kod.

När du bygger en React Native-app kommer du ofta att komponera den från olika skärmar som Login, Home och About. Du måste sedan implementera en navigeringsmekanism så att dina användare kan navigera i appen och komma åt dess individuella skärmar i rätt ordning.

Syftet med denna handledning är att leda dig genom processen att ställa in ett navigationssystem i din React Native-applikation. Detta inkluderar att installera biblioteket, lägga till dina skärmar i stacknavigatorn och koppla samman skärmarna från var och en av dina komponenter.

Innan du börjar

För att följa den här handledningen på din lokala dator måste du ha följande installerat:

  • Node.js v10 eller högre
  • Xcode eller Android Studio (ställ in för att köra emulatorn)
  • Reagera Native CLI

För steg-för-steg-instruktioner om hur du ställer in din React Native-utvecklingsmiljö, kan du läsa officiella React Native installationsdokumentation.

instagram viewer

Innan du börjar titta på hur du implementerar navigering i vår React Native-app, låt oss förstå hur stacknavigeringsmekanismen fungerar i React Native.

Förstå hur stacknavigering fungerar

Föreställ dig att din React Native-applikation är en stack. Till en början, på den högen, har du Hem, vilket är den första skärmen som visas när du öppnar appen.

Om du skulle navigera till Handla om skärm från Hem skärmen skulle appen trycka Handla om på högen, så att den sitter ovanpå Hem. På samma sätt skjuter appen varje ny skärm du navigerar till till stacken.

Nu, om du vill gå tillbaka till föregående skärm, släpper appen din nuvarande skärm från högen och visar dig den under den. Detta beteende liknar det som händer när du klickar på "tillbaka"-ikonen i din webbläsare.

Med en tydlig förståelse av stacknavigeringsmekanismen är det nu dags att ställa in den i en React Native-app.

1. Installera React Navigation för inbyggda appar

För att komma igång, installera React navigationspaket för infödda appar i ditt React Native-projekt genom att utföra detta kommando på en terminal:

npm i @reagera-navigering/inföding

Paketet du just installerade kräver Reager Native Stack och Reagera inbyggda skärmar att köra ordentligt. För att installera RN Stack, kör:

npm i @reagera-navigering/inföding-stack

För att installera den andra, kör detta:

npm jag reagerar-inföding-skärmar

Nu har du allt du behöver för att börja skapa navigeringsmekanismen i din applikation. Nästa steg är att ställa in skärmarna.

2. Ställ in skärmen i din React Native-app

För det här exemplet kommer vi bara att skapa två skärmar - hemskärmen och skärmen Om.

Skapa en mapp med namnet skärmar i ditt programs rotkatalog. Efteråt skapar du två filer som heter HomeScreen.js och AboutScreen.js i katalogen skärmar.

Vad du ska lägga till i din HomeScreen.js-fil

Öppna filen HomeScreen.js och börja med att importera följande:

importera * som Reagera från'reagera';
importera { Text, View, StyleSheet, TouchableOpacity } från"reagera-native";
importera { useState } från'reagera'

Skapa sedan HomeScreen funktionella komponent och få tillgång till navigationsobjektet med hjälp av objektdekonstruktion (enligt Reagera bästa praxis), returnera sedan en titel och knapp för att navigera till skärmen Om:

exporterastandardfungeraHemskärm({navigering}) { 
lämna tillbaka ( 
<Sestil={styles.container}>
<Textstil={styles.paragraph}> Hemskärm Text>
 titel="Gå till Om"
 onPress={() => navigation.navigate("About Screen")} 
 /> 
Se>
 );
}

Här säger vi till React Native att navigera till Handla om när en användare trycker på knappen. I det här fallet skickar vi ingen data till skärmen. Men antar att du vill skicka data till funktionen; så här gör du:

exporterastandardfungeraHemskärm({navigering}) { 
konst data = { webbplatsnamn: "Johns teknik" }
lämna tillbaka ( 
<Sestil={styles.container}>
// Text kommer här 
 titel="Gå till Om"
 onPress={() => navigation.navigate("About Screen", data)} 
 /> 
Se>
 );
}

Nu när du trycker på knappen skickar denna kod data till nästa skärm, Handla om. Inuti AboutScreen.js fil kan du komma åt data från rutten och visa den i användargränssnittet.

Vad du ska lägga till i din AboutScreen.js-fil

Öppna filen AboutScreen.js och börja med att importera följande beroenden:

importera * som Reagera från'reagera';
importera { Text, View, StyleSheet, Button } från"reagera-native";

Skapa sedan AboutScreen funktionell komponent som tar in data från route.params egenskap och returnerar data i användargränssnittet:

exporterastandardfungeraAboutScreen({rutt}) { 
låta dataObj = route.params
lämna tillbaka ( 
<Sestil={styles.container}>
<Textstil={styles.paragraph}>
 Detta är Om-skärmen för {dataObj.websiteName} 
Text>
Se>
 );
}

Om du kommer ihåg, angav vi en enda egenskap i dataobjektet som heter webbplatsnamn, som vi nu återger inuti komponent. Du kan lägga till så många egenskaper du vill i objektet och komma åt dem i målskärmskomponenten.

Nästa steg är att ställa in vår stacknavigator med de två skärmarna.

3. Ansluta skärmarna med Stack Navigator

Inuti App.js börjar du med att importera följande beroenden:

importera * som Reagera från'reagera';
importera Hemskärm från'./skärmar/Hemskärm'
importera AboutScreen från'./screens/AboutScreen'
importera { NavigationContainer } från"@react-navigation/native"
importera { createNativeStackNavigator } från"@react-navigation/native-stack"

På rad två och tre importerade vi de två skärmarna vi just skapat. Sedan importerade vi Navigationsbehållare

från @reagera-navigering/native och createNativeStackNavigator från @react-navigation/native-stack för att hjälpa oss att ansluta skärmarna.

Nästa, ring createNativeStackNavigator för att hämta stacken:

konst Stack = createNativeStackNavigator()

Detta gör att vi kan "stapla upp" de skärmar du vill växla mellan i din app.

Skapa appkomponentfunktionen och returnera båda skärmarna i enligt nedanstående. Se till att linda in den i annars fungerar det inte:

exporterastandardfungeraApp() { 
lämna tillbaka ( 
<Navigationsbehållare>
<Stack. Navigatör>
<Stack. Skärmnamn="Hemskärm"komponent = {Hemskärm} />
<Stack. Skärmnamn="About Screen"komponent = {AboutScreen} />
Stack. Navigatör>
Navigationsbehållare>
 );
}

Den här koden placerar HomeScreen-skärmen ovanpå stacken, vilket innebär att appen först renderar Home-komponenten när den har laddats klart.

Nu är allt klart. Du kan testa appen genom att klicka på Gå till Om knappen på hemgränssnittet. Detta bör omdirigera dig till Handla om, och du hittar webbplatsnamn egenskap som visas i användargränssnittet:

2 bilder

Det bästa med att använda React Navigation för Native är att det är så enkelt att ställa in och använda. Det kräver inga extra konfigurationer (förutom de nödvändiga biblioteken du installerade), och du kan också ansluta olika typer av betalväggar (om du tänker bygga en prenumerationsbaserad app).

Lär dig mer om React Native

React Native är ett plattformsoberoende ramverk för att skapa applikationer som körs på Android- och iOS-enheter. Det finns så mycket att lära sig om React Native, och om du är ny på att använda ramverket bör du börja med att lära dig grunderna.