¿Cómo pasar valor entre pantallas en React Native?

React Native se utiliza para crear aplicaciones multiplataforma. Uno de los mayores inconvenientes de React Native es que no viene con ningún sistema de navegación integrado. Tenemos que usar otras bibliotecas para implementar la navegación en React Native. La biblioteca React Navigation se usa ampliamente con React Native para implementar varios tipos de sistemas de navegación.

Con React Navigation, también podemos pasar valores o parámetros entre pantallas en React Native. Crearemos un navegador de pila simple con 2 pantallas y pasaremos valores de una pantalla a otra.

Crear aplicación:

Paso 1: Abra su Terminal y ejecute el siguiente comando. Instalará Expo CLI globalmente en su sistema.

npm install -g expo-cli

Paso 2: ahora, cree un nuevo proyecto nativo de React ejecutando el siguiente comando.

expo init "Your_Project_Name"

Paso 3 : se le pedirá que elija una plantilla. Seleccione la plantilla en blanco.

plantilla en blanco

Paso 4: Ahora ve a la carpeta del proyecto

cd "Your_Project_Name"

Paso 5: Ahora, para implementar cualquier tipo de navegación, primero debemos instalar el paquete React Navigation en nuestro React Native Project. Ejecutar debajo del comando.

npm install @react-navigation/native // OR
yarn add @react-navigation/native

Paso 6: Instale las dependencias requeridas en un proyecto administrado por Expo.

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

Paso 7: Las bibliotecas que hemos instalado hasta ahora son los paquetes necesarios para los navegadores. Pero cada navegador en React Navigation tiene su propia biblioteca que debemos agregar.

npm install @react-navigation/native-stack // OR
yarn add @react-navigation/native-stack

Paso 8: Ahora ejecute el siguiente comando para iniciar el servidor.

npm start

Estructura del proyecto : Se verá como lo siguiente.

Estructura del proyecto

En el siguiente ejemplo, crearemos 2 pantallas llamadas HomeScreen y MessageScreen. También crearemos un navegador de pila y pasaremos valores de HomeScreen a MessageScreen. Entonces cree 2 archivos llamados HomeScreen.js y MessageScreen.js.

Pantalla de inicio y pantalla de mensajes

Ejemplo: Siga estos pasos para pasar valor entre pantallas en React Native.

Paso 1: abra el archivo HomeScreen.js y escriba el código a continuación en ese archivo.

En este archivo, crearemos un TextInput y un componente Button. Los usuarios pueden agregar mensajes en este TextInput y presionar el botón. El usuario será redirigido a MessageScreen. Pasaremos cualquier valor que el usuario haya ingresado desde HomeScreen a MessageScreen y ese mensaje se mostrará en MessageScreen.

import { Button, StyleSheet, Text, TextInput, 
    View } from 'react-native';
import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
  
const HomeScreen = () => {
  const [message, setMessage] = useState('');
  const navigation = useNavigation();
  const goToMessageScreen = () => {
    navigation.navigate('Message', {
      message,
    });
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>GeeksforGeeks</Text>
      <TextInput
        placeholder="Enter your message here"
        value={message}
        onChangeText={(text) => setMessage(text)}
        style={styles.input}
      />
      <Button title="Submit" 
        onPress={goToMessageScreen} color="green" />
    </View>
  );
};
  
export default HomeScreen;
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
    color: 'green',
    marginTop: 50,
  },
  input: {
    width: '75%',
    padding: 10,
    marginTop: 20,
    color: '#000',
  },
});

Paso 2: abra el archivo MessageScreen.js y escriba el código a continuación en ese archivo.

En este archivo, recibiremos valor de HomeScreen a través de la ruta. Más adelante, mostraremos ese valor en un componente de Texto en la pantalla.

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';
import { useRoute } from '@react-navigation/native';
  
const MessageScreen = () => {
  const route = useRoute();
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{route.params.message}</Text>
    </View>
  );
};
  
export default MessageScreen;
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
    color: 'green',
    marginTop: 50,
  },
});

Paso 3: abra el archivo App.js y escriba el código a continuación en ese archivo.

App.js es el archivo principal que se muestra primero cuando ejecuta su aplicación. En este archivo, crearemos un navegador de pila. NavigationContainer contendrá HomeScreen y MessageScreen para que podamos navegar entre ellos.

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import MessageScreen from './MessageScreen';
  
const Stack = createNativeStackNavigator();
  
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: 'green',
          },
          headerTintColor: '#fff',
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Message" component={MessageScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Producción:

Pasar valores entre pantallas