Navigeren tussen schermen in een React Native-app

Wanneer u een React Native-app bouwt, stelt u deze vaak samen op basis van verschillende schermen, zoals Login, Home en About. U moet dan een navigatiemechanisme implementeren zodat uw gebruikers door de app kunnen navigeren en de afzonderlijke schermen in de juiste volgorde kunnen openen.

Het doel van deze zelfstudie is om u door het proces van het instellen van een navigatiesysteem in uw React Native-toepassing te leiden. Dit omvat het installeren van de bibliotheek, het toevoegen van uw schermen aan de stapelnavigator en het met elkaar verbinden van de schermen vanuit elk van uw componenten.

Voordat je begint

Om deze zelfstudie op uw lokale computer te volgen, moet u het volgende hebben geïnstalleerd:

• Node.js v10 of hoger
• Xcode of Android-studio (instellen om de emulator uit te voeren)
• Reageer native CLI

Voor stapsgewijze instructies voor het opzetten van uw React Native ontwikkelomgeving kunt u de officieel React Native opstelling documentatie.

Voordat u gaat kijken hoe u navigatie in onze React Native-app kunt implementeren, laten we eens kijken hoe het stack-navigatiemechanisme werkt in React Native.

Begrijpen hoe stapelnavigatie werkt

Stel je voor dat je React Native-applicatie een stapel is. Aanvankelijk, op die stapel, heb je Thuis, het eerste scherm dat wordt weergegeven wanneer u de app opent.

Als je zou navigeren naar de Over scherm van de Thuis scherm, zou de app pushen Over op de stapel, zodat het bovenop zit Thuis. Op dezelfde manier duwt de app elk nieuw scherm waar je naartoe navigeert naar de stapel.

Als u nu terug wilt naar het vorige scherm, haalt de app uw huidige scherm uit de stapel en toont u het scherm eronder. Dit gedrag is vergelijkbaar met wat er gebeurt wanneer u op het pictogram "terug" in uw webbrowser klikt.

Met een duidelijk begrip van het stack-navigatiemechanisme, is het nu tijd om het in te stellen in een React Native-app.

1. Installeer React Navigation voor native apps

Installeer om te beginnen het Reageren navigatie pakket voor native apps in uw React Native-project door deze opdracht uit te voeren op een terminal:

npm ik @Reageer-navigatie/oorspronkelijk

Het pakket dat u zojuist hebt geïnstalleerd, vereist Reageer Native Stack En Reageer op inheemse schermen om goed te lopen. Voer het volgende uit om RN Stack te installeren:

npm ik @Reageer-navigatie/oorspronkelijk-stapel

Voer dit uit om de tweede te installeren:

npm ik reageer-oorspronkelijk-schermen

Nu heb je alles wat je nodig hebt om het navigatiemechanisme in je applicatie te maken. De volgende stap is het opzetten van de schermen.

2. Stel het scherm in uw React Native-app in

Voor dit voorbeeld maken we slechts twee schermen: het startscherm en het scherm Info.

Maak een map met de naam schermen in de hoofdmap van uw toepassing. Maak daarna twee bestanden met de naam HomeScreen.js en AboutScreen.js in de map schermen.

Wat toe te voegen aan uw HomeScreen.js-bestand

Open het bestand HomeScreen.js en begin met het importeren van het volgende:

importeren * als Reageer van'Reageer';
importeren { Tekst, Weergave, StyleSheet, TouchableOpacity } van'reageren-native';
importeren { useState } van'Reageer'

Maak vervolgens de functionele component HomeScreen en krijg toegang tot het navigatieobject met behulp van objectdeconstructie (volgens Reageer best practices), geef dan een titel en een knop terug om naar het over-scherm te navigeren:

exporterenstandaardfunctieThuis scherm({navigatie}) { 
opbrengst ( 
<Weergavestijl={styles.container}>
<Tekststijl={stijlen.paragraaf}> Thuis scherm Tekst>
 titel="Ga naar Over"
 onPress={() => navigatie.navigate('Over Scherm')} 
 /> 
Weergave>
 );
}

Hier vertellen we React Native om naar toe te navigeren Over wanneer een gebruiker op de knop drukt. In dit geval geven we geen gegevens door aan het scherm. Maar stel dat je dat wel wilt gegevens doorgeven aan de functie; hier is hoe je dat zou doen:

exporterenstandaardfunctieThuis scherm({navigatie}) { 
const gegevens = { website naam: "John's technologie" }
opbrengst ( 
<Weergavestijl={styles.container}>
// Tekst komt hier 
 titel="Ga naar Over"
 onPress={() => navigatie.navigate('Over Scherm', gegevens)} 
 /> 
Weergave>
 );
}

Wanneer u nu op de knop drukt, geeft deze code de gegevens door aan het volgende scherm, Over. Binnen in de OverScreen.js bestand, kunt u toegang krijgen tot de gegevens van de route en deze weergeven op de gebruikersinterface.

Wat toe te voegen aan uw AboutScreen.js-bestand

Open het bestand AboutScreen.js en begin met het importeren van de volgende afhankelijkheden:

importeren * als Reageer van'Reageer';
importeren { Tekst, Weergave, StyleSheet, Knop } van'reageren-native';

Maak vervolgens de OverScreen functionele component die gegevens opneemt van de route.parameters eigenschap en retourneert de gegevens in de gebruikersinterface:

exporterenstandaardfunctieOverScreen({route}) { 
laten dataObj = route.params
opbrengst ( 
<Weergavestijl={styles.container}>
<Tekststijl={stijlen.paragraaf}>
 Dit is het Over-scherm van {dataObj.websiteName} 
Tekst>
Weergave>
 );
}

Als u het zich herinnert, hebben we een enkele eigenschap gespecificeerd in het data-object met de naam website naam, die we nu weergeven in de bestanddeel. U kunt zoveel eigenschappen aan het object toevoegen als u wilt, en ze openen binnen de component doelschermen.

De volgende stap is het instellen van onze stapelnavigator met de twee schermen.

3. De schermen verbinden met de Stack Navigator

Begin in App.js met het importeren van de volgende afhankelijkheden:

importeren * als Reageer van'Reageer';
importeren Thuis scherm van'./schermen/HomeScreen'
importeren OverScreen van'./schermen/AboutScreen'
importeren { NavigatieContainer } van"@react-navigatie/native"
importeren { creëerNativeStackNavigator} van"@react-navigatie/native-stack"

Op regel twee en drie hebben we de twee schermen geïmporteerd die we zojuist hebben gemaakt. Vervolgens hebben we geïmporteerd NavigatieContainer

van @react-navigatie/native En createNativeStackNavigator van @react-navigatie/native-stack om ons te helpen de schermen te verbinden.

Bel vervolgens createNativeStackNavigator om de stapel op te halen:

const Stapel = createNativeStackNavigator()

Hierdoor kunnen we de schermen waartussen u wilt overschakelen in uw app "opstapelen".

Maak de app-componentfunctie en retourneer beide schermen in de zoals hieronder weergegeven. Zorg ervoor dat je het in de wikkel wikkelt of het werkt niet:

exporterenstandaardfunctieapp() { 
opbrengst ( 
<NavigatieContainer>
<Stapel. Navigator>
<Stapel. Schermnaam="Thuis scherm"bestanddeel = {Thuis scherm} />
<Stapel. Schermnaam="Over Scherm"bestanddeel = {OverScreen} />
Stapel. Navigator>
NavigatieContainer>
 );
}

Deze code plaatst het HomeScreen-scherm bovenop de stapel, wat betekent dat de app eerst de Home-component zal renderen wanneer deze klaar is met laden.

Nu is alles ingesteld. U kunt de app testen door op de knop te klikken Ga naar Over knop op de Home UI. Dit zou u moeten doorverwijzen naar Over, en je vindt de website naam eigenschap weergegeven in de gebruikersinterface:

Het beste aan het gebruik van React Navigation for Native is dat het zo eenvoudig is in te stellen en te gebruiken. Het vereist geen extra configuraties (naast de vereiste bibliotheken die u hebt geïnstalleerd) en u kunt ook verbinding maken verschillende soorten betaalmuren (als u van plan bent een op abonnementen gebaseerde app te bouwen).

Meer informatie over React Native

React Native is een platformonafhankelijk framework voor het maken van applicaties die op Android- en iOS-apparaten draaien. Er valt zoveel te leren over React Native, en als je nieuw bent in het gebruik van het framework, zou je moeten beginnen met het leren van de basis.