React Native Academy · Oppitunti

React Navigationin asentaminen ja määrittäminen

Asentakaa React Navigation ja sen riippuvuudet, ympäröikää sovellus NavigationContainerilla ja määrittäkää ensimmäinen kahden näkymän stack-navigaattorinne.

Oppitunti 1/413 vaihetta

React Navigationin asentaminen ja määrittäminen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mikä React Navigation on?

React Navigation on suosituin kirjasto React Native -sovellusten navigoinnin hallintaan. Se tarjoaa navigaattoreita — Stack-, Tab- ja Drawer-navigaattorit — joiden avulla voitte siirtyä näyttöjen välillä, välittää tietoja ja hallita navigointihistoriaa. React Navigation perustuu JavaScriptiin ja toimii saumattomasti Expon sekä paljaiden React Native -projektien kanssa.

Yd riippuvuuksien asentaminen

React Navigation edellyttää ydinpaketin lisäksi useita natiiviriippuvuuksia. Suorittakaa asennuskomento ja asentakaa sen jälkeen natiivinen stack-navigaattori sekä tarvittavat ele- ja animaatiokirjastot.

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

Natiivisen Stack-navigaattorin asentaminen

@react-navigation/native-stack-paketin natiivinen stack-navigaattori käyttää iOS:n ja Androidin natiiveja navigointikomponentteja. Se tarjoaa paremman suorituskyvyn ja natiivimman käyttötuntuman kuin pelkkään JavaScriptiin perustuva stack. Asentakaa se ydinpaketin yhteydessä.

npm install @react-navigation/native-stack

Sovelluksen kääriminen NavigationContaineriin

Jokaisessa React Navigation -määrityksessä NavigationContainer-komponentin on oltava sovelluksen juuritason kääre. Se hallitsee navigointipuuta, käsittelee Androidin paluupainikkeen ja tarjoaa navigointikontekstin kaikille alikomponenteille. Käärikää koko sovellus sen sisään tiedostossa App.js.

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* navigator goes here */}
    </NavigationContainer>
  );
}

Stack-navigaattorin luominen

Luokaa stack-navigaattori käyttämällä funktiota createNativeStackNavigator(). Funktio palauttaa Navigator- ja Screen-komponentit. Rekisteröikää näytöt sijoittamalla Stack.Screen-komponentit Stack.Navigator-komponentin sisään.

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name='Home' component={HomeScreen} />
      <Stack.Screen name='Details' component={DetailsScreen} />
    </Stack.Navigator>
  );
}

initialRouteName-props

Oletusarvoisesti Stack.Navigator-komponentissa ensimmäisenä määritetty näyttö on aloitusnäyttö. Voitte määrittää ensimmäisenä näytettävän näytön eksplisiittisesti käyttämällä initialRouteName-propsia Stack.Navigator-komponentissa. Arvon on vastattava jonkin Stack.Screen-alikomponentin name-arvoa.

<Stack.Navigator initialRouteName='Details'>
  <Stack.Screen name='Home' component={HomeScreen} />
  <Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>

Yksinkertaisten näyttökomponenttien luominen

Jokainen navigaattoriin rekisteröity näyttö on tavallinen React-komponentti. React Navigation lisää navigation- ja route-propsit automaattisesti jokaiseen rekisteröityyn näyttökomponenttiin. Näiden propsien avulla voitte navigoida tai lukea reittiparametreja.

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

Kaiken kokoaminen yhteen

Kun yhdistätte NavigationContainerin, stack-navigaattorin ja näyttökomponentit, saatte toimivan kahden näytön sovelluksen. Ensimmäisenä rekisteröity näyttö näkyy sovelluksen käynnistyessä. React Navigation käsittelee paluupainikkeen ja navigoinnin otsikkopalkin automaattisesti.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={HomeScreen} />
        <Stack.Screen name='Details' component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Otsikkopalkin otsikon mukauttaminen

Jokainen Stack.Screen hyväksyy options-propsin, jonka avulla voitte mukauttaa otsikkopalkkia. Asettakaa title-arvo, jos haluatte korvata navigointipalkissa näytettävän oletusnäytön nimen. Voitte myös asettaa arvon headerShown: false, jolloin otsikkopalkki piilotetaan kokonaan.

<Stack.Screen
  name='Home'
  component={HomeScreen}
  options={{ title: 'My Home Page' }}
/>

Näyttöasetukset navigaattorissa

Asettakaa screenOptions Stack.Navigator-komponentille, jos haluatte käyttää oletusasetuksia kaikissa näytöissä. Yksittäisen näytön options-asetukset ohittavat navigaattorin oletukset. Näin vältätte yleisten asetusten, kuten headerStyle- tai headerTintColor-asetuksen, toistamisen jokaisessa näytössä.

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: '#6200ee' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>
  <Stack.Screen name='Home' component={HomeScreen} />
  <Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>

Määrityksen tarkistaminen

Suorittakaa npx expo start ja avatkaa sovellus. Teidän pitäisi nähdä Home-näyttö navigoinnin otsikkopalkin kanssa. iOS:ssä paluupainike ilmestyy automaattisesti, kun siirrytte Details-näyttöön. Androidissa React Navigation käsittelee laitteen paluupainikkeen. Jos sovellus kaatuu, tarkistakaa, että react-native-screens ja react-native-safe-area-context on asennettu.

Pikatarkistus

Testatkaa, miten hyvin ymmärrätte tämän oppitunnin React Navigationin määrityksiin liittyvät käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opitte asentamaan React Navigationin core- ja native-stack-paketit, käärimään sovelluksen NavigationContaineriin ja määrittämään näytöt Stack.Navigatorin sisällä Stack.Screen-komponenteilla. Seuraavaksi tutustumme näyttöjen välillä navigointiin ja parametrien välittämiseen.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”React Navigationin asentaminen ja määrittäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “React Navigationin asentaminen ja määrittäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”React Navigationin asentaminen ja määrittäminen”?

Asentakaa React Navigation ja sen riippuvuudet, ympäröikää sovellus NavigationContainerilla ja määrittäkää ensimmäinen kahden näkymän stack-navigaattorinne. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”React Navigationin asentaminen ja määrittäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

React Navigationin asentaminen ja määrittäminen
Näkymien välillä navigointi ja parametrien välittäminen
Alavälilehtinavigaattori
Sivupalkkinavigaattori ja sisäkkäiset navigaattorit

← Takaisin: React Native Academy