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

Introducció a React Navigation

Següent ►
►

React Navigation és una biblioteca popular per a la navegació en aplicacions React Native. Proporciona una manera senzilla i flexible de gestionar la navegació entre pantalles en una aplicació mòbil. En aquest tema, aprendrem els conceptes bàsics de React Navigation, com configurar-lo i com crear una navegació bàsica entre pantalles.

Objectius d'aprenentatge

  • Comprendre què és React Navigation i per què és útil.
  • Configurar React Navigation en un projecte de React Native.
  • Crear una navegació bàsica entre pantalles.

Què és React Navigation?

React Navigation és una biblioteca que permet gestionar la navegació en aplicacions React Native. Ofereix diverses opcions de navegació, com ara Stack Navigator, Tab Navigator i Drawer Navigator, que permeten crear experiències d'usuari riques i intuïtives.

Avantatges de React Navigation

  • Flexibilitat: Permet crear navegacions complexes amb facilitat.
  • Modularitat: Cada tipus de navegació es pot configurar de manera independent.
  • Integració: Es pot integrar fàcilment amb altres biblioteques i components de React Native.

Configuració de React Navigation

Pas 1: Instal·lació de les dependències

Per començar a utilitzar React Navigation, primer hem d'instal·lar les dependències necessàries. Obre el terminal i executa les següents comandes:

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

També necessitem instal·lar les dependències necessàries per a React Native:

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

Pas 2: Configuració bàsica

Després d'instal·lar les dependències, hem de configurar el nostre projecte per utilitzar React Navigation. Obre el fitxer App.js i afegeix el següent codi:

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

const Stack = createNativeStackNavigator();

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;

Explicació del codi

  • NavigationContainer: És el contenidor principal per a la navegació. Ha d'envoltar tota la jerarquia de navegació.
  • createNativeStackNavigator: Crea un Stack Navigator, que permet la navegació entre pantalles en forma de pila.
  • Stack.Navigator: Defineix la configuració del Stack Navigator.
  • Stack.Screen: Defineix cada pantalla dins del Stack Navigator.

Pas 3: Creació de pantalles

Ara, crearem dues pantalles senzilles: HomeScreen i DetailsScreen. Crea un directori anomenat screens i afegeix els següents fitxers:

HomeScreen.js

import * as 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.js

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

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

export default DetailsScreen;

Explicació del codi

  • HomeScreen: Conté un botó que, quan es prem, navega a la pantalla de detalls utilitzant la funció navigation.navigate('Details').
  • DetailsScreen: Mostra un text senzill.

Exercici pràctic

Objectiu

Crear una aplicació amb dues pantalles: una pantalla d'inici i una pantalla de detalls. La pantalla d'inici ha de tenir un botó que navegui a la pantalla de detalls.

Passos

  1. Configura React Navigation seguint els passos anteriors.
  2. Crea les pantalles HomeScreen i DetailsScreen.
  3. Afegeix un botó a HomeScreen que navegui a DetailsScreen.

Solució

La solució ja s'ha proporcionat en els exemples de codi anteriors. Assegura't de seguir els passos i verificar que la navegació funcioni correctament.

Errors comuns i consells

  • Error: "Unable to resolve module": Assegura't d'haver instal·lat totes les dependències necessàries.
  • Error: "No route found": Verifica que els noms de les pantalles coincideixin amb els noms utilitzats en navigation.navigate.

Conclusió

En aquesta secció, hem après què és React Navigation, com configurar-lo i com crear una navegació bàsica entre pantalles. Aquest és el primer pas per crear aplicacions React Native amb navegació complexa i intuïtiva. En el següent tema, explorarem el Stack Navigator en més detall.

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