Stack navigáció

A tab navigáció mellett egy másik gyakori navigációs forma a stack navigáció. Úgy kell elképzelni a Stack navigációt, mint rétegesen egymáson elhelyezkedő képernyőket.

Hová tegyük a navigációval kapcsolatos kódokat?

Alapvetően a navigáció egy alap (core) eleme minden mobilalkalmazásnak. Ennél fogva célszerű a navigációt is külön könyvtárba szervezni. Például az src/infrastructure/navigation mappába. Ez a navigation mappa tartalmazza az összes navigációval kapcsolatos kódot. Ezen belül lehet mondjuk egy app.navigator.js vagy main.navigator.js. Az elnevezés mindegy, a lényeg, hogy ez tartalmazza a fő navigációt.

Telepítés és használat

A Stack navigáció a @react-navigation/stack csomag része. Az első lépés a stack navigáció telepítése a doksi alapján:

npm install @react-navigation/stack

Ezt kell importálni:

import { createStackNavigator } from "@react-navigation/stack";

Ez teszi lehetővé, hogy Stack navigációt hozzunk létre:

const Stack = createStackNavigator();

Nyilvánvaló, hogy kell egy komponens az egésznek:

export const MyStackNavigator = () => {
  return (
    <Stack.Navigator
      <strong>screenOptions={{
        headerShown: false,
      }}</strong>
    >
      <Stack.Screen
        name="Restaurants"
        component={RestaurantsScreen}
      />
    </Stack.Navigator>
  );
};

A screenOptions tulajdonságban megadtuk, hogy ne jelenjen meg a fejlécben semmilyen cím.

Beágyazott navigáció

Azt ugye már tudjuk, hogy a navigációt azt egy <NavigationContainer> </NavigationContainer> komponens közé kell tenni. Sokszor van olyan eset, amikor egy navigációban szereplő képernyő az nem egy képernyő komponenst kap meg, hanem egy másik navigációt. Navigáció a navigációban esete áll fenn tehát.

Például van egy Tab navigációnk:

  <NavigationContainer>
    <Tab.Navigator screenOptions={createScreenOptions}>
      <Tab.Screen name="RestaurantsTab" component={<strong>RestaurantsNavigator</strong>} />
      <Tab.Screen name="Map" component={Map} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  </NavigationContainer>

A RestaurantsTab component tulajdonságában átadott cucc nem egy képernyő komponens, hanem egy full navigáció. Ez egy másik fájlban van kifejtve és egy Stack navigációt tartalmaz:

import React from "react";

import { createStackNavigator } from "@react-navigation/stack";

import { RestaurantsScreen } from "../../features/restaurants/screens/restaurants.screen";

const RestaurantStack = createStackNavigator();

export const <strong>RestaurantsNavigator</strong> = () => {
  return (
    <RestaurantStack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <RestaurantStack.Screen
        name="Restaurants"
        component={RestaurantsScreen}
      />
    </RestaurantStack.Navigator>
  );
};

navigation tulajdonság (prop)

Ha van két képernyő, akkor hogyan oldjuk meg azt, hogy az egyikből navigálni lehessen a másikba? Adott tehát ez:

export const RestaurantsNavigator = () => {
  return (
    <RestaurantStack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <RestaurantStack.Screen
        name="<strong>Restaurants</strong>"
        component={RestaurantsScreen}
      />
      <RestaurantStack.Screen
        name="<strong>RestaurantDetail</strong>"
        component={() => <Text>Restaurant Detail</Text>}
      />
    </RestaurantStack.Navigator>
  );
};

Tehát a Restaurants és a RestaurantDetail képernyők a Stack-en belül. A feladat, hogy megoldjuk a navigációt a Restaurants és a RestaurantDetail között.

A components tulajdonságban megadott komponens minden esetben kap egy ún. navigation prop-ot. A példánál maradva van valahol egy RestaurantsScreen komponens. Ezt adtuk meg a fenti kódban a component tulajdonságban. Ez a komponens is automatikusan megkapja tehát a navigation tulajdonságot:

export const RestaurantsScreen = ({ <strong>navigation </strong>}) => {

A navigation-nel egy nagy objektum fog a rendelkezésünkre állni. Mi arra vagyunk elsősorban kíváncsiak, hogy mivel lehet navigálni.

navigation.navigate

A navigate metódussal tudunk navigálni. Itt egy konkrét példa:

            <Pressable onPress={() => <strong>navigation.navigate</strong>("RestaurantDetail")}>
              <Spacer position="bottom" size="large">
                <RestaurantInfoCard restaurant={item} />
              </Spacer>
            </Pressable>

Miután a komponens hozzáfér a navigation objektumhoz, elérhető annak navigate metódusa. A Pressable komponens használatával tettük kattinthatóvá az adott komponenst, és annak onPress kezelőjében hívtuk meg a navigation.navigate metódust, aminek a cél képernyő nevét adtuk meg.