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

Passar paràmetres a les rutes

Següent ►
►

En aquest tema, aprendrem com passar paràmetres entre diferents pantalles utilitzant React Navigation. Això és essencial per a la majoria d'aplicacions, ja que sovint necessitem transferir dades d'una pantalla a una altra.

Objectius

  • Comprendre com passar paràmetres a les rutes.
  • Aprendre a accedir als paràmetres en la pantalla de destinació.
  • Veure exemples pràctics de com utilitzar aquests paràmetres.

Passar paràmetres a les rutes

  1. Configuració inicial

Abans de començar, assegura't que tens React Navigation configurat en el teu projecte. Si no ho has fet, segueix les instruccions del tema anterior sobre la configuració de React Navigation.

  1. Passar paràmetres amb navigate

Per passar paràmetres a una ruta, utilitzem el mètode navigate i passem un objecte com a segon argument. Aquest objecte conté els paràmetres que volem passar.

// Navegar a la pantalla 'Details' amb paràmetres
navigation.navigate('Details', {
  itemId: 86,
  otherParam: 'qualsevol valor',
});

  1. Accedir als paràmetres en la pantalla de destinació

Per accedir als paràmetres en la pantalla de destinació, utilitzem el hook useRoute de React Navigation.

import React from 'react';
import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const DetailsScreen = () => {
  const route = useRoute();
  const { itemId, otherParam } = route.params;

  return (
    <View>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
};

export default DetailsScreen;

  1. Exemple complet

A continuació, es mostra un exemple complet que inclou dues pantalles: HomeScreen i DetailsScreen. En aquest exemple, passarem un paràmetre des de HomeScreen a DetailsScreen.

HomeScreen.js

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

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', {
          itemId: 86,
          otherParam: 'qualsevol valor',
        })}
      />
    </View>
  );
};

export default HomeScreen;

DetailsScreen.js

import React from 'react';
import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const DetailsScreen = () => {
  const route = useRoute();
  const { itemId, otherParam } = route.params;

  return (
    <View>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
    </View>
  );
};

export default DetailsScreen;

  1. Navegació amb Stack Navigator

Assegura't que tens configurat el Stack Navigator per a aquestes pantalles.

App.js

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

const Stack = createStackNavigator();

const 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;

Exercici pràctic

Exercici

  1. Crea una nova pantalla anomenada ProfileScreen.
  2. Des de HomeScreen, navega a ProfileScreen passant un paràmetre username.
  3. Mostra el valor de username a ProfileScreen.

Solució

ProfileScreen.js

import React from 'react';
import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const ProfileScreen = () => {
  const route = useRoute();
  const { username } = route.params;

  return (
    <View>
      <Text>Username: {username}</Text>
    </View>
  );
};

export default ProfileScreen;

HomeScreen.js (actualitzat)

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

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile', {
          username: 'JohnDoe',
        })}
      />
    </View>
  );
};

export default HomeScreen;

App.js (actualitzat)

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

const Stack = createStackNavigator();

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

export default App;

Conclusió

En aquest tema, hem après com passar paràmetres entre pantalles utilitzant React Navigation. Hem vist com passar paràmetres amb el mètode navigate i com accedir-hi en la pantalla de destinació amb el hook useRoute. També hem practicat aquests conceptes amb un exercici pràctic. Ara estàs preparat per gestionar la navegació amb paràmetres en les teves aplicacions React Native!

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