Pinonavigaattorin käyttäminen voi auttaa sovellustasi siirtymään näytöltä toiselle pienellä koodimäärällä.

Usein, kun rakennat React Native -sovellusta, luot sen eri näytöiltä, ​​kuten Kirjaudu sisään, Koti ja Tietoja. Sinun on sitten otettava käyttöön navigointimekanismi, jotta käyttäjäsi voivat navigoida sovelluksessa ja käyttää sen yksittäisiä näyttöjä oikeassa järjestyksessä.

Tämän opetusohjelman tarkoituksena on opastaa sinua navigointijärjestelmän määrittämisessä React Native -sovelluksessasi. Tämä sisältää kirjaston asentamisen, näyttöjen lisäämisen pinonavigaattoriin ja näyttöjen yhdistämisen kustakin komponentista.

Ennen kuin aloitat

Jotta voit seurata tätä opetusohjelmaa paikallisella tietokoneellasi, sinun on oltava asennettuna:

  • Node.js v10 tai uudempi
  • Xcode tai Android Studio (asetettu suorittamaan emulaattori)
  • React Native CLI

Voit lukea vaiheittaiset ohjeet React Native -kehitysympäristön määrittämiseen virallinen React Native asennusdokumentaatio.

Ennen kuin alat tarkastella navigoinnin toteuttamista React Native -sovelluksessamme, ymmärrämme kuinka pinon navigointimekanismi toimii React Nativessa.

instagram viewer

Pinonavigoinnin toiminnan ymmärtäminen

Kuvittele, että React Native -sovelluksesi on pino. Aluksi tuossa pinossa sinulla on Koti, joka on ensimmäinen näyttö, joka tulee näkyviin, kun avaat sovelluksen.

Jos sinun pitäisi navigoida kohteeseen Noin näytöltä Koti näyttöä, sovellus työntäisi Noin pinoon, joten se istuu sen päällä Koti. Samoin sovellus työntää pinoon jokaisen uuden näytön, johon navigoit.

Nyt, jos haluat palata edelliseen näyttöön, sovellus ponnahtaa nykyisen näytösi pinosta ja näyttää sen alla olevan näytön. Tämä käyttäytyminen on samanlaista kuin se, mitä tapahtuu, kun napsautat selaimen "takaisin"-kuvaketta.

Kun ymmärrät pinon navigointimekanismin selkeästi, on nyt aika määrittää se React Native -sovelluksessa.

1. Asenna React Navigation natiivisovelluksille

Aloita asentamalla React navigointipaketti natiivisovelluksille React Native -projektissasi suorittamalla tämä komento päätteessä:

npm i @reagoi-navigointi/syntyperäinen

Juuri asentamasi paketti vaatii React Native Stack ja Reagoi alkuperäiset näytöt juoksemaan kunnolla. Asenna RN Stack suorittamalla:

npm i @reagoi-navigointi/syntyperäinen-pino

Asenna toinen suorittamalla tämä:

npm reagoin-syntyperäinen-näytöt

Nyt sinulla on kaikki mitä tarvitset aloittaaksesi navigointimekanismin luomisen sovelluksessasi. Seuraava vaihe on näyttöjen asettaminen.

2. Määritä näyttö React Native -sovelluksessasi

Tätä esimerkkiä varten luomme vain kaksi näyttöä – aloitusnäytön ja tiedot-näytön.

Luo kansio nimeltä näytöt sovelluksesi juurihakemistossa. Luo sen jälkeen kaksi tiedostoa nimeltä HomeScreen.js ja AboutScreen.js hakemistoon näytöt.

Mitä lisätä HomeScreen.js-tiedostoon

Avaa HomeScreen.js-tiedosto ja aloita tuomalla seuraavat:

tuonti * kuten Reagoi alkaen'reagoi';
tuonti { Text, View, Style Sheet, TouchableOpacity } alkaen'react-native';
tuonti { useState } alkaen'reagoi'

Luo seuraavaksi HomeScreen-toiminnallinen komponentti ja käytä navigointiobjektia objektien purkamisen avulla (kuten Reagoi parhaisiin käytäntöihin), palauta sitten otsikko ja painike Tietoja-näyttöön siirtymistä varten:

viedäoletuksenatoimintoAloitusnäyttö({navigointi}) { 
palata ( 
<Näytätyyli={styles.container}>
<Tekstityyli={styles.paragraph}> Aloitusnäyttö Teksti>
 otsikko="Siirry Tietoja"
 onPress={() => navigation.navigate("Tietoja näytöstä")} 
 /> 
Näytä>
 );
}

Tässä kehotamme React Nativea navigoimaan Noin kun käyttäjä painaa painiketta. Tässä tapauksessa emme välitä mitään tietoja näytölle. Mutta oletetaan, että haluat siirtää tietoja funktiolle; näin tekisit sen:

viedäoletuksenatoimintoAloitusnäyttö({navigointi}) { 
konst data = { verkkosivuston nimi: "John's Tech" }
palata ( 
<Näytätyyli={styles.container}>
// Teksti menee tänne 
 otsikko="Siirry Tietoja"
 onPress={() => navigation.navigate("Tietoja näytöstä", data)} 
 /> 
Näytä>
 );
}

Nyt kun painat painiketta, tämä koodi siirtää tiedot seuraavaan näyttöön, Noin. Sisällä AboutScreen.js tiedosto, voit käyttää reitin tietoja ja näyttää ne käyttöliittymässä.

Mitä lisätä AboutScreen.js-tiedostoosi

Avaa AboutScreen.js-tiedosto ja aloita tuomalla seuraavat riippuvuudet:

tuonti * kuten Reagoi alkaen'reagoi';
tuonti { Teksti, näkymä, tyylitaulukko, painike } alkaen'react-native';

Luo seuraavaksi Tietoja näytöstä toiminnallinen komponentti, joka vastaanottaa tietoja route.params ominaisuus ja palauttaa tiedot käyttöliittymässä:

viedäoletuksenatoimintoTietoja näytöstä({reitti}) { 
antaa dataObj = reitti.params
palata ( 
<Näytätyyli={styles.container}>
<Tekstityyli={styles.paragraph}>
 Tämä On Sivuston {dataObj.websiteName} Tietoja-näyttö 
Teksti>
Näytä>
 );
}

Jos muistat, määritimme yhden ominaisuuden nimettyyn tietoobjektiin verkkosivuston nimi, jonka nyt renderöimme sisällä komponentti. Voit lisätä objektiin niin monta ominaisuutta kuin haluat ja käyttää niitä kohdenäyttökomponentin sisällä.

Seuraava vaihe on pinonavigaattorin asentaminen kahdella näytöllä.

3. Näyttöjen yhdistäminen pinonavigaattorilla

Aloita App.js: n sisällä tuomalla seuraavat riippuvuudet:

tuonti * kuten Reagoi alkaen'reagoi';
tuonti Aloitusnäyttö alkaen'./screens/HomeScreen'
tuonti Tietoja näytöstä alkaen'./screens/AboutScreen'
tuonti { NavigationContainer } alkaen"@react-navigation/natiivi"
tuonti { createNativeStackNavigator } alkaen"@react-navigation/native-stack"

Riveillä kaksi ja kolme toimme juuri luomamme kaksi näyttöä. Sitten toimme maahan NavigationContainer

alkaen @react-navigation/native ja createNativeStackNavigator alkaen @react-navigation/native-stack auttaa meitä yhdistämään näytöt.

Seuraavaksi soita createNativeStackNavigator pinon hakeminen:

konst Pino = createNativeStackNavigator()

Näin voimme "pinota" näytöt, joiden välillä haluat siirtyä sovelluksessasi.

Luo App-komponenttitoiminto ja palauta molemmat näytöt kuten alla. Muista kääriä se tai se ei toimi:

viedäoletuksenatoimintoSovellus() { 
palata ( 
<NavigationContainer>
<Pino. Navigaattori>
<Pino. Näyttönimi="Aloitusnäyttö"komponentti = {Aloitusnäyttö} />
<Pino. Näyttönimi="Tietoja näytöstä"komponentti = {AboutScreen} />
Pino. Navigaattori>
NavigationContainer>
 );
}

Tämä koodi asettaa HomeScreen-näytön pinon päälle, mikä tarkoittaa, että sovellus renderöi ensin Home-komponentin, kun se on latautunut.

Nyt kaikki on asetettu. Voit testata sovellusta napsauttamalla Siirry kohtaan Tietoja -painiketta kotikäyttöliittymässä. Tämän pitäisi ohjata sinut osoitteeseen Noin, ja löydät verkkosivuston nimi käyttöliittymässä näkyvä ominaisuus:

2 kuvaa

Parasta React Navigation for Nativen käytössä on, että sen käyttöönotto ja käyttö on niin helppoa. Se ei vaadi ylimääräisiä määrityksiä (paitsi asentamasi vaaditut kirjastot), ja voit myös muodostaa yhteyden erilaisia ​​maksumuureja (jos aiot rakentaa tilauspohjaisen sovelluksen).

Lue lisää React Nativesta

React Native on monialustainen kehys Android- ja iOS-laitteissa toimivien sovellusten luomiseen. React Nativesta on paljon opittavaa, ja jos olet uusi kehyksen käytössä, sinun tulee aloittaa oppimalla perusasiat.