¿Cómo usar el enrutamiento con React Navigation en React Native?

Casi todas las aplicaciones móviles requieren navegar entre diferentes pantallas. React Native proporciona una biblioteca elegante y fácil de usar para agregar navegación a las aplicaciones nativas: react-navigation. Es una de las bibliotecas más populares utilizadas para enrutar y navegar en una aplicación React Native.

Los navegadores gestionan la transición entre varias pantallas. React Navigation permite varios tipos de navegadores, como Stack Navigators, Drawer Navigators, Tab Navigators, etc. Además de navegar entre varias pantallas, también se puede usar para compartir datos entre ellas.

Enfoque: Usaremos StackNavigator proporcionado por React Navigation. Se utiliza para permitir transiciones entre pantallas en las que cada nueva pantalla se coloca encima de una pila. En nuestro ejemplo, crearemos 3 pantallas y haremos la transición entre ellas usando StackNavigator. También aprenderemos cómo pasar datos de una pantalla a otra y mostrarlos en el encabezado de la pantalla junto con la transición básica.

Creación de aplicaciones e instalación de módulos:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init react-navigation-routing

• Paso 3: ahora ve a la carpeta de tu proyecto, es decir, react-navigation-routing

  cd react-navigation-routing

• Paso 4: instale los paquetes necesarios con el siguiente comando:

  npm install –save react-navigation react-navigation-stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-vector-icons

Estructura del proyecto: el directorio del proyecto debe tener el siguiente aspecto:

Ejemplo: en este ejemplo, crearemos 3 pantallas, a saber, pantalla de inicio, pantalla de perfil y pantalla de configuración. Usaremos un Stack Navigator y lo configuraremos con algunos estilos básicos. También enviaremos dinámicamente datos desde una pantalla y los mostraremos como el título del encabezado en otra pantalla (tomaremos la entrada del usuario en la pantalla de inicio, la pasaremos a la pantalla de perfil y la mostraremos en el encabezado de la pantalla de perfil).

Este archivo contiene la configuración básica de Navigator. Usaremos el método createStackNavigator() proporcionado por la biblioteca react-navigation-stack para crear nuestro navegador de pila. Se proporcionan algunos estilos básicos a las 3 pantallas utilizando las opciones de navegación predeterminadas. 

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
  
import HomeScreen from "./screens/HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import SettingsScreen from "./screens/SettingsScreen";
  
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#006600",
      },
      headerTintColor: "#FFF",
    },
  }
);
  
const Navigator = createAppContainer(AppNavigator);
  
export default function App() {
  return (
    <Navigator>
      <HomeScreen />
    </Navigator>
  );
}

Esta es la primera pantalla de nuestra pila. En esta pantalla, le pediremos al usuario que proporcione un nombre de perfil como entrada que pasaremos a la pantalla «Perfil».

import React, { useState } from "react";
import { Text, View, TextInput, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Home = (props) => {
  const [input, setInput] = useState("");
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Home Screen!</Text>
      <Ionicons name="ios-home" size={80} color="#006600" />
      <TextInput
        placeholder="Enter your profile"
        value={input}
        onChangeText={(value) => setInput(value)}
      />
      <Button
        title="Go to Profile"
        color="#006600"
        onPress={() =>
          props.navigation.navigate("Profile", { username: input })
        }
      />
    </View>
  );
};
  
export default Home;

Esta pantalla recibirá la entrada proporcionada por el usuario en la pantalla de inicio utilizando el objeto navData y la mostrará en su encabezado. 

import React from "react";
import { Text, View, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Profile = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Profile Screen!</Text>
      <Ionicons name="ios-person-circle-outline" size={80} color="#006600" />
      <Button
        title="Go to Settings"
        color="#006600"
        onPress={() => props.navigation.navigate("Settings")}
      />
    </View>
  );
};
  
Profile.navigationOptions = (navData) => {
  return {
    headerTitle: navData.navigation.getParam("username"),
  };
};
  
export default Profile;

Esta es una pantalla simple con un botón para volver a la pantalla de inicio.

import React from "react";
import { Text, View, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Settings = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Settings Screen!</Text>
      <Ionicons name="ios-settings-outline" size={80} color="#006600" />
      <Button
        title="Go to Home"
        color="#006600"
        onPress={() => props.navigation.navigate("Home")}
      />
    </View>
  );
};
  
export default Settings;

Paso para ejecutar la aplicación: Inicie el servidor usando el siguiente comando.

expo start

Producción:

Referencia: https://reactnative.dev/docs/navigation