Jak se pohybovat mezi obrazovkami v aplikaci React Native

Při vytváření aplikace React Native ji často skládáte z různých obrazovek, jako je Login, Home a About. Poté budete muset implementovat navigační mechanismus, aby vaši uživatelé mohli procházet aplikací a přistupovat k jejím jednotlivým obrazovkám ve správném pořadí.

Účelem tohoto tutoriálu je provést vás procesem nastavení navigačního systému ve vaší aplikaci React Native. To zahrnuje instalaci knihovny, přidání obrazovek do navigátoru zásobníku a propojení obrazovek z každé z vašich komponent.

Než začnete

Abyste mohli postupovat podle tohoto návodu na místním počítači, musíte mít nainstalované následující:

• Node.js v10 nebo vyšší
• Xcode nebo Android Studio (nastaveno pro spuštění emulátoru)
• Reagovat Native CLI

Podrobné pokyny, jak nastavit vývojové prostředí React Native, si můžete přečíst v oficiální React Native dokumentaci k nastavení.

Než se pustíte do toho, jak implementovat navigaci v naší aplikaci React Native, pojďme si vysvětlit, jak funguje mechanismus navigace zásobníku v React Native.

Pochopení toho, jak funguje navigace zásobníku

Představte si, že vaše aplikace React Native je zásobník. Zpočátku na tom zásobníku máte Domov, což je první obrazovka, která se zobrazí při otevření aplikace.

Pokud byste měli navigovat do O obrazovky z Domov na obrazovce, aplikace by tlačila O na stoh, takže sedí navrchu Domov. Podobně aplikace přesune každou novou obrazovku, na kterou přejdete, do zásobníku.

Nyní, pokud se chcete vrátit na předchozí obrazovku, aplikace vytáhne vaši aktuální obrazovku ze zásobníku a zobrazí vám tu pod ní. Toto chování je podobné tomu, co se stane, když ve webovém prohlížeči kliknete na ikonu „zpět“.

S jasným pochopením mechanismu procházení zásobníku je nyní čas jej nastavit v aplikaci React Native.

1. Nainstalujte React Navigation pro nativní aplikace

Chcete-li začít, nainstalujte Navigační balíček React pro nativní aplikace ve vašem projektu React Native provedením tohoto příkazu na terminálu:

npm i @reagovat-navigace/rodák

Balíček, který jste právě nainstalovali, vyžaduje Reagovat Native Stack a React Native Screens správně běžet. Chcete-li nainstalovat RN Stack, spusťte:

npm i @reagovat-navigace/rodák-zásobník

Chcete-li nainstalovat druhý, spusťte toto:

npm reaguji-rodák-obrazovky

Nyní máte vše, co potřebujete, abyste mohli začít vytvářet navigační mechanismus ve vaší aplikaci. Dalším krokem je nastavení obrazovek.

2. Nastavte obrazovku ve své aplikaci React Native

V tomto příkladu vytvoříme pouze dvě obrazovky – domovskou obrazovku a obrazovku Informace.

Vytvořte složku s názvem obrazovky v kořenovém adresáři vaší aplikace. Poté v adresáři vytvořte dva soubory s názvem HomeScreen.js a AboutScreen.js obrazovky.

Co přidat do souboru HomeScreen.js

Otevřete soubor HomeScreen.js a začněte importem následujícího:

import * tak jako Reagovat z'reagovat';
import { Text, View, StyleSheet, TouchableOpacity } z'react-native';
import { useState } z'reagovat'

Dále vytvořte funkční komponentu HomeScreen a přistupte k navigačnímu objektu pomocí dekonstrukce objektu (jak Reagovat osvědčené postupy), poté vraťte název a tlačítko pro navigaci na obrazovku Informace:

vývoznívýchozífunkceDomovská obrazovka({navigace}) { 
vrátit se ( 
<Pohledstyl={styles.container}>
<Textstyl={styles.paragraph}> Domovská obrazovka Text>
 titul="Přejít na O mně"
 onPress={() => navigation.navigate('AboutScreen')} 
 /> 
Pohled>
 );
}

Zde říkáme React Native, kam má přejít O když uživatel stiskne tlačítko. V tomto případě na obrazovku nepředáváme žádná data. Ale předpokládejme, že chcete předat data funkci; takto byste to udělali:

vývoznívýchozífunkceDomovská obrazovka({navigace}) { 
konst data = { název webu: "John's Tech" }
vrátit se ( 
<Pohledstyl={styles.container}>
// Text jde sem 
 titul="Přejít na O mně"
 onPress={() => navigation.navigate('AboutScreen', data)} 
 /> 
Pohled>
 );
}

Nyní, když stisknete tlačítko, tento kód předá data na další obrazovku, O. Uvnitř AboutScreen.js souboru, můžete přistupovat k datům z trasy a zobrazovat je v uživatelském rozhraní.

Co přidat do souboru AboutScreen.js

Otevřete soubor AboutScreen.js a začněte importováním následujících závislostí:

import * tak jako Reagovat z'reagovat';
import { Text, View, StyleSheet, Button } z'react-native';

Dále vytvořte O obrazovce funkční součást, která přebírá data z trasa.param vlastnost a vrátí data v uživatelském rozhraní:

vývoznívýchozífunkceO obrazovce({trasa}) { 
nechat dataObj = route.params
vrátit se ( 
<Pohledstyl={styles.container}>
<Textstyl={styles.paragraph}>
 Tento je obrazovka O aplikaci {dataObj.websiteName} 
Text>
Pohled>
 );
}

Pokud si vzpomínáte, specifikovali jsme jednu vlastnost v datovém objektu s názvem název webu, kterou nyní vykreslíme uvnitř komponent. Do objektu můžete přidat tolik vlastností, kolik chcete, a přistupovat k nim uvnitř komponenty cílové obrazovky.

Dalším krokem je nastavení našeho navigátoru zásobníku se dvěma obrazovkami.

3. Propojení obrazovek s Navigátorem zásobníku

Uvnitř App.js začněte importováním následujících závislostí:

import * tak jako Reagovat z'reagovat';
import Domovská obrazovka z'./screens/HomeScreen'
import O obrazovce z'./screens/AboutScreen'
import { NavigationContainer } z"@react-navigation/native"
import { createNativeStackNavigator } z"@react-navigation/native-stack"

Na řádcích dva a tři jsme importovali dvě obrazovky, které jsme právě vytvořili. Poté jsme importovali Navigační kontejner

z @react-navigation/native a createNativeStackNavigator z @react-navigation/native-stack které nám pomohou propojit obrazovky.

Dále zavolejte createNativeStackNavigator k načtení zásobníku:

konst Stack = createNativeStackNavigator()

To nám umožňuje „naskládat“ obrazovky, mezi kterými chcete ve své aplikaci přecházet.

Vytvořte funkci součásti aplikace a vraťte obě obrazovky do Jak je ukázáno níže. Ujistěte se, že jej zabalíte do nebo to nebude fungovat:

vývoznívýchozífunkceAplikace() { 
vrátit se ( 
<Navigační kontejner>
<Zásobník. Navigátor>
<Zásobník. Obrazovkanázev="Domovská obrazovka"komponent = {Domovská obrazovka} />
<Zásobník. Obrazovkanázev="O obrazovce"komponent = {AboutScreen} />
Zásobník. Navigátor>
Navigační kontejner>
 );
}

Tento kód umístí obrazovku HomeScreen na horní část zásobníku, což znamená, že aplikace po dokončení načítání nejprve vykreslí komponentu Home.

Nyní je vše nastaveno. Aplikaci můžete otestovat kliknutím na Přejděte na O aplikaci tlačítko na domovském rozhraní. To by vás mělo přesměrovat na O, a najdete název webu vlastnost zobrazená v uživatelském rozhraní:

Nejlepší na používání React Navigation for Native je to, že se tak snadno nastavuje a používá. Nevyžaduje žádné další konfigurace (kromě požadovaných knihoven, které jste nainstalovali), a můžete se také připojit různé typy paywallů (pokud máte v úmyslu vytvořit aplikaci založenou na předplatném).

Zjistěte více o React Native

React Native je multiplatformní framework pro vytváření aplikací, které běží na zařízeních Android a iOS. O React Native je toho tolik, co se můžete naučit, a pokud s používáním frameworku začínáte, měli byste začít tím, že se naučíte základy.