Navigáció képernyők között

React Native-al a navigáció képernyők között egyszerű. Mindössze néhány csomagot kell a projektünkhöz hozzáadni és néhány perc alatt egy navigációs rendszerrel felszerelt mobilalkalmazást üthetünk össze.

React Native projekt létrehozása Expo-val

Induljunk ki egy teljesen üres projektből. Expo-val indítok egy projektet, ahol az npm a választott csomag kezelő:

expo init reactnative-navigation --npm

A felajánlott lehetőségek között én a sima blank-et választom, amivel egy teljesen alap, JavaScript-es, Expo által menedzselt React Native projektünk lesz:

React Native projekt létrehozása Yarn-al

A Yarn egy alternatív csomagkezelője az NPM mellett. Én a React 18-as verziója óta ezt használom. Hogy miért, arra egy külön bejegyzésben kitérek.

Ha nincs Yarn a gépen, akkor ezzel a paranccsal kell telepíteni:

npm install --global yarn

A hivatalos doksi is azt javasolja, hogy az npm csomagkezelővel érdemes telepíteni. Miután a Yarn települt, ezt egy a terminálba / konzolba kiadott

yarn --version

utasítással tudjuk ellenőrizni. Ha sikeres volt a telepítés, akkor a konzolban látni fogjuk a Yarn verziószámát.

Ez után jöhet a ReactNative Expo projekt telepítése:

yarn create expo-app AppName

A projektet például a VSCode terminálban kiadott npx expo start paranccsal tudjuk elindítani.

Navigációhoz szükséges csomagok

Ami kell a hivatalos doksi szerint, az a @react-navigation/native és a @react-navigation/native-stack csomagok:

npm install @react-navigation/native @react-navigation/native-stack

Ezeken kívül egyéb csomagokat is telepíteni kell. Ezek a react-native-screens és a react-native-safe-area-context.

Ha Expo által menedzselt projekten dolgozunk, akkor az expo-val kell őket telepíteni:

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

Ha „bare” React Native projekten dolgozunk, akkor az npm-el kell ezeket telepíteni:

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

Képernyők készítése – a navigáció alapjai

Nincs más hátra, mint elkészíteni a képernyőket és magát a navigációt is ki kell alakítani. Az én egyszerű bemutatómban lesz egy Kezdőlap (HomeScreen) képernyő, ami tartalmaz két gombot, amikkel el lehet navigálni két másik képernyőre is. Legyen az egyik mondjuk az, hogy Belépés (SignInScreen), a másik pedig az, hogy Regisztráció (SignUpScreen).

Készítek a gyökérkönyvtárban két mappát. Az egyik a screens, a másik a components. A screens fogja tartalmazni a képernyőket. A components-ben pedig létrehozok egy olyan komponenst, amit a navigációra fogok felhasználni.

A kódon belül magát a navigációs részt a NavigationContainer-en belül kell megadni:

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

const App = () => {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
};

export default App;

Fontos, hogy a NavigationContainer-t ne vegye körül semmi. Maximum Fragment (<> … </>) lehet körülötte, tehát így pl:

    <>
      <StatusBar style="dark" />

      <NavigationContainer>
      {/* Rest of your app code */}
      </NavigationContainer>

    </>

Jöhetnek maguk a képernyők, amiket tehát a gyökér (root) könyvtárban (azaz az app.js fájlal azonos szinten) screen mappában készítek el.

HomeScreen

Ezt a HomeScreen.js fájlba teszem és az lesz a feladata, hogy segítségével elnavigáljunk a másik két képernyőre attól függően, hogy az illető be akar lépni, vagy regisztrálni szeretne.

A teljes kód:

import { View, Button, StyleSheet } from "react-native";

import { useNavigation } from "@react-navigation/native";

export default function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <View style={styles.buttonsContainer}>
        <Button
          title="Sign In"
          onPress={() => navigation.navigate("SignInScreen")}
        />
        <Button
          title="Sign Up"
          onPress={() => navigation.navigate("SignUpScreen")}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "yellow",
    alignItems: "center",
  },
  buttonsContainer: {
    flexDirection: "row",
    padding: 8,
  },
});

Legfelül vannak az importok. Ezek közül kiemelném a useNavigation hookot, ami a @react-navigation/native csomagban van és arra jó, hogy azok a képernyő komponensek is képesek legyenek a navigációra, amik nem kapják meg közvetlenül a navigation objektumot. Ugyanis, ahogy látszik a kódban, létrehozok egy navigaton objektumot a useNavigation hook segítségével. Így aztán már használni tudom a navigation objektumnak a navigate() metódusát, ami a tényleges képernyő váltásokat (navigációt) csinálja.

A HomeScreen komponensben két gombot renderelek ki a return metódusban. Az egyik a SignInScreen, a másik a SignUpScreen képernyőre visz. A gombok onPress metódusában van az a nyíl függvény, ami a navigációt hívja:

onPress={() => navigation.navigate("SignInScreen")}

A navigate metódusnak a képernyő komponens nevét adtam át mindkét esetben. A Button komponens pedig egy sima react-native képernyő elem.

A kód végén pedig egy kis stílust hoztam létre a StyleSheet segítségével.

SignInScreen és SignUpScreen

Ezek a képernyő komponensek semmi különöset nem csinálnak. Csupán egy szöveget írnak a képernyőre:

// SignInScreen.js
import { View, Text } from "react-native";
export default function SignInScreen() {
    return(
        <View>
            <Text>SignInScreen</Text>
        </View>
    )
}

// SignUpScreen.js
import { View, Text } from "react-native";
export default function SignUpScreen() {
    return(
        <View>
            <Text>SignUpScreen</Text>
        </View>
    )
}

A Navigator komponens

Mindenképpen kell egy olyan komponens, ami valahogyan tárolja nekünk az összes képernyőt. Először a teljes kód:

// navigation
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();

// screens
import HomeScreen from "../screens/HomeScreen";
import SignInScreen from "../screens/SignInScreen";
import SignUpScreen from "../screens/SignUpScreen";

export default function Navigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="HomeScreen"
          component={HomeScreen}
          options={{
            title: "Home",
          }}
        />
        <Stack.Screen
          name="SignInScreen"
          component={SignInScreen}
          options={{
            title: "Sign in",
          }}
        />
        <Stack.Screen
          name="SignUpScreen"
          component={SignUpScreen}
          options={{
            title: "Sign up",
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

A React Native navigációval kapcsolatos csomagjában az ún. Stack Navigator teszi lehetővé, hogy szép átmenetes navigációt tudjunk létrehozni az egyes képernyők között. Ebben az esetben minden képernyő egy úgynevezett Stack-ben van, ahol a legelső képernyő az alapértelmezett. Ez jelenik meg elsőnek.

Két fő dolgot kell importálni: NavigationContainer. Ez fogja egységbe a Stack-eket, illetve kezeli az alkalmazás state-et is. A másik pedig a createNativeStackNavigator, amivel pedig a Stack-et és azon belül a képernyőket hozzuk létre.

Legkívül tehát a <NavigationContainer> komponens van, ami az egész cuccot körülöleli. Ezeket burkoló kompnensenken, wrapper-eknek hívjuk. Ezen belül van egy másik burkoló is, a <Stack.Navigator>. Ez zárja egységbe az egyes Stack-eket, amiket pedig a <Stack.Screen /> komponenssel hozunk létre.

Hogyan is néz ki egy ilyen kis képernyő (Stack.Screen)?

Két fontos paramétere mindig van. A name, amiben a képernyő nevét adjuk meg. Navigációban erre a névre hivatkozunk, ahogyan a HomeScreen komponensen belül is tettük a Button-ok onPress tulajdonságában, amikor a képernyőket hívtuk. A másik fontos paraméter, pedig a component. Itt pedig magát a képernyő komponenst adjuk át. Ezért fontos, hogy a fájl elején az összes olyan képernyő komponenst importáljuk, amit a Stack tartalmazni fog.

Van még több másik paraméter is, aminek itt utána lehet olvasni. Amit én használtam az az options, ami egy olyan objektum, ahol a képernyőt lehet konfigurálni. Én ezen az options objektumon belül most csak egy title paramétert állítottam be, ami a képernyőnek a címeként jelenik meg legfelül.