El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Stack Navigator

Següent ►
►

Introducció

El Stack Navigator és un dels tipus de navegadors més utilitzats en React Navigation. Permet als desenvolupadors apilar pantalles una sobre l'altra, de manera que es pot navegar endavant i enrere entre pantalles, similar a com funcionen les pàgines en un navegador web.

Configuració inicial

Instal·lació de React Navigation

Abans de començar a utilitzar el Stack Navigator, necessitem instal·lar React Navigation i les seves dependències. Executa les següents comandes al teu terminal:

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

Configuració bàsica

Després d'instal·lar les dependències, hem de configurar el nostre projecte per utilitzar React Navigation. Afegeix el següent codi al teu fitxer principal (normalment App.js):

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

export default App;

Creació de pantalles

HomeScreen

Crea un fitxer anomenat HomeScreen.js dins d'una carpeta screens i afegeix el següent codi:

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

export default HomeScreen;

DetailsScreen

Crea un fitxer anomenat DetailsScreen.js dins de la mateixa carpeta screens i afegeix el següent codi:

import React from 'react';
import { View, Text, Button } from 'react-native';

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

export default DetailsScreen;

Navegació entre pantalles

Navegar a una pantalla específica

Per navegar a una pantalla específica, utilitzem el mètode navigate proporcionat per l'objecte navigation:

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details')}
/>

Tornar a la pantalla anterior

Per tornar a la pantalla anterior, utilitzem el mètode goBack:

<Button
  title="Go back"
  onPress={() => navigation.goBack()}
/>

Passar paràmetres entre pantalles

Enviar paràmetres

Podem enviar paràmetres a una pantalla utilitzant el mètode navigate:

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'anything you want here' })}
/>

Rebre paràmetres

Podem rebre els paràmetres a la pantalla de destinació utilitzant l'objecte route:

function DetailsScreen({ route, navigation }) {
  const { itemId, otherParam } = route.params;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {itemId}</Text>
      <Text>otherParam: {otherParam}</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

Personalització del Stack Navigator

Opcions de pantalla

Podem personalitzar cada pantalla utilitzant les opcions de pantalla (screenOptions):

<Stack.Navigator
  initialRouteName="Home"
  screenOptions={{
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}
>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'My Home' }}
  />
  <Stack.Screen
    name="Details"
    component={DetailsScreen}
    options={{ title: 'Details' }}
  />
</Stack.Navigator>

Exercici pràctic

Objectiu

Crea una aplicació amb tres pantalles: HomeScreen, ProfileScreen i SettingsScreen. Implementa la navegació entre aquestes pantalles utilitzant el Stack Navigator.

Solució

  1. Crea els fitxers ProfileScreen.js i SettingsScreen.js dins de la carpeta screens.
  2. Implementa el codi per a cada pantalla similar a com ho hem fet per a HomeScreen i DetailsScreen.
  3. Afegeix les noves pantalles al Stack Navigator dins del fitxer App.js.
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import SettingsScreen from './screens/SettingsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Conclusió

El Stack Navigator és una eina poderosa per gestionar la navegació en aplicacions React Native. Permet una navegació intuïtiva i fàcil d'implementar entre pantalles, amb la possibilitat de personalitzar l'aparença i el comportament de cada pantalla. Amb la pràctica, podràs crear aplicacions complexes amb una navegació fluida i eficient.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats