El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos cómo pasar parámetros entre diferentes pantallas en una aplicación de React Native utilizando React Navigation. Pasar parámetros es una funcionalidad esencial para crear aplicaciones dinámicas y personalizadas.

Conceptos Clave

React Navigation: Biblioteca utilizada para manejar la navegación en aplicaciones de React Native.
Parámetros de Ruta: Datos que se pasan de una pantalla a otra.
Props de Navegación: Propiedades que React Navigation proporciona a los componentes para manejar la navegación y los parámetros.

Configuración Inicial

Antes de comenzar, asegúrate de tener React Navigation instalado y configurado en tu proyecto. Si no lo has hecho, sigue las instrucciones en la documentación oficial de React Navigation.

Pasando Parámetros

Configuración del Navegador

Primero, configuraremos un navegador de pila (Stack Navigator) con dos pantallas: HomeScreen y DetailsScreen.

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

Enviando Parámetros

En la HomeScreen, utilizaremos la función navigation.navigate para enviar parámetros a la DetailsScreen.

// screens/HomeScreen.js
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', {
          itemId: 86,
          otherParam: 'anything you want here',
        })}
      />
    </View>
  );
}

export default HomeScreen;

Recibiendo Parámetros

En la DetailsScreen, utilizaremos route.params para acceder a los parámetros enviados desde la HomeScreen.

// screens/DetailsScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Text>Other Param: {otherParam}</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details', {
          itemId: Math.floor(Math.random() * 100),
        })}
      />
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

export default DetailsScreen;

Ejercicio Práctico

Ejercicio

Crea una nueva pantalla llamada ProfileScreen.
Desde HomeScreen, navega a ProfileScreen pasando un parámetro username.
En ProfileScreen, muestra el username en un Text.

Solución

// 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';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createStackNavigator();

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

// screens/HomeScreen.js
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 Profile"
        onPress={() => navigation.navigate('Profile', {
          username: 'JohnDoe',
        })}
      />
    </View>
  );
}

export default HomeScreen;

// screens/ProfileScreen.js
import React from 'react';
import { View, Text } from 'react-native';

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
      <Text>Username: {username}</Text>
    </View>
  );
}

export default ProfileScreen;

Resumen

En esta lección, hemos aprendido cómo pasar parámetros entre pantallas utilizando React Navigation. Este conocimiento es fundamental para crear aplicaciones React Native dinámicas y personalizadas. Asegúrate de practicar estos conceptos creando tus propias pantallas y pasando diferentes tipos de parámetros.

En la próxima lección, exploraremos cómo obtener datos de la red utilizando la Fetch API. ¡Sigue adelante!

Pasando Parámetros a Rutas

Conceptos Clave

Configuración Inicial

Pasando Parámetros

Configuración del Navegador

Enviando Parámetros

Recibiendo Parámetros

Ejercicio Práctico

Ejercicio

Solución

Resumen

Curso de React Native

Módulo 1: Introducción a React Native

Módulo 2: Componentes Básicos y Estilizado

Módulo 3: Estado y Ciclo de Vida

Módulo 4: Navegación

Módulo 5: Redes y Datos

Módulo 6: Conceptos Avanzados

Módulo 7: Despliegue y Publicación

Módulo 8: Proyectos del Mundo Real