Skip to content
Kezdőlap » Tab navigáció

Tab navigáció

Jelenleg a reactnavigation.org által szállított megoldás a legegyszerűbb és legbiztosabb megoldás arra, hogy iOS és Android rendszeren futó mobil alkalmazásunk Tab navigáció boldog tulajdonosa legyen.

tab navigáció
A képet innen vettem kölcsön. Köszönöm!

Használat

A használat első lépése mindig a megfelelő csomag telepítése:

npm install @react-navigation/native

vagy

yarn add @react-navigation/native

Ez az alap csomag, amit telepíteni kell. A doksiban tovább olvasva újabb utasításokat kapunk, hogy milyen csomagokat kell telepíteni pl., ha Expo által kezelt projektet használunk. Ezt is érdemes, ha Expo-val dolgozunk:

expo install react-native-screens react-native-safe-area-context

Tabok

A tab navigáció talán a leggyakrabban használt navigáció típus a mobilokon. A React Native, pontosabban a React Navigation külön csomagot készített minden egyes navigáció típushoz. Így csak azt kell telepíteni, amire valóban szükségünk van. A tab navigációhoz például ez kell:

npm install @react-navigation/bottom-tabs

vagy

yarn add @react-navigation/bottom-tabs

Van két fontos csomag, amit mindenképpen importálni kell:

import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"  

Létre kell hozni egy Tab navigációs elemet, egy Tab komponenst, ahhoz, hogy meg tudjuk valósítani a tab navigációt:

const Tab = createBottomTabNavigator();

A kódban az összes navigációs elemet a NavigationContainer komponens közé kell tenni:

<NavigationContainer>
// ...
</NavigationContainer>

Ezen belül kell még egy wrapper magának a tab navigátornak:

<Tab.Navigator>
// ...
</Tab.Navigator>

És végül ezen belül kell hivatkoznunk az egyes képernyőkre (tab screen):

        <NavigationContainer>
          <Tab.Navigator>
            <strong><Tab.Screen name="Restaurants" component={RestaurantsScreen} />
            <Tab.Screen name="Map" component={MapScreen} />
            <Tab.Screen name="Settings" component={SettingsScreen} /></strong>
          </Tab.Navigator>
        </NavigationContainer>

Minden tab képernyő mögött egy komponens van. Az egyes tabokból tudunk hivatkozni a másik tabokra. Az egyes tabokon belüli interakciók megmaradnak a tabokon belül. Tehát minden egyes tab egy külön kis világ. Egy tab tehát egy konténernek tekinthető.

Természetesen a component tulajdonságban megadott komponensen el lettek készítve már és be is lettek importálva. Például:

import { RestaurantsScreen } from "./src/features/restaurants/screens/restaurants.screen";
import { MapScreen } from "./src/features/restaurants/screens/map.screen";
import { SettingsScreen } from "./src/features/restaurants/screens/settings.screen";

Alapértelmezett képernyő

A képernyők abban a sorrendben jelennek meg, amilyen sorrendben a Navigator-on belül el lettek helyezve. Ez felülbírálható az initialRouteName kapcsolóval, vagy tulajdonsággal. Ezt a Navigator egy tulajdonságaként tudjuk megadni például így:

<Tab.Navigator
      <strong>initialRouteName</strong>="Settings"
      screenOptions={createScreenOptions}
>

Értéke, annak a képernyőnek a neve (ami a name paraméterben szerepel), amit szeretnénk, hogy alapértelmezetten megjelenjen.

És még valami látszik ebből: nem a screenOptions-ban kell ezt megadni, hanem egy önálló tulajdonságként.

Tab ikon

Az egyes tab-okhoz ikon is rendelhető. Az expo-val telepítésre kerül egy csomag, amit mi is tudunk használni. Ez az @expo/vector-icons. Itt egy bejegyzés arról, hogyan kell használni. Ugyanakkor a hivatalos dokumentáció is segít a tab-ok csinosításában.

Látható, hogy a logika a screenOptions tulajdonságban (prop) van, ami a Tab.Navigator-nak egy konfiguráló attribútuma. Magyarul, ezen keresztül tudunk jó sok mindent beállítani az összes Tab-hoz egyszerre, egy menetben.

      <Tab.Navigator
        <strong>screenOptions</strong>={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >

A screenOptions tulajdonság egy függvénnyel tér vissza. Ez a függvény egy objektumot ad vissza nekünk. Olyan ez mintha külön írnánk erre egy függvényt, ami egy objektumot ad vissza a return utasítással. A return helyett, ha ({ }) formát használjuk, akkor ez ugyanazt jelenti, mintha a return-t használtuk volna:

const screenOptions = ({ route }) => {
    return {
    }
};

// ugyanígy a rövid forma:

const screenOptions = ({ route }) => ({});

Visszatérve a fenti példára a screenOptions által visszaadott függvény a route-ot kapja meg paraméterként. A visszatérő objektumnak egyik paramétere a tabBarIcon, ami maga is egy függvény :). A végén ez egy <Ionicons /> komponenst ad vissza.

Tab felirat elrejtése

Ez az idők folyamán többször változott. Jelenleg a ReactNavigation 6-os verzióját írjuk és a screenOptions objektumon belül kell elhelyezni egy tabBarShowLabel tulajdonságot. Ha false, akkor nem jelenik meg a tab címkéje. Az alapérték true, ami azt jelenti, hogy megjelenik a címke.

    <Tab.Navigator <strong>screenOptions</strong>={{
        <strong>tabBarShowLabel: false</strong>
    }}
    >
      // ...
    </Tab.Navigator>

Expo Snack – példa

Előkészületben…, mert tudom, ide nagyon kellene egy példa.

Dokumentáció

A hivatalos doksi linkje.