Navegar entre pantallas (screens) con React Native

Tiempo de lectura: 3 minutos

En React Native cada pantalla es un objeto apilable que se va añadiendo en la parte superior de la pila. Es decir, que si abrimos una pantalla y luego la cerramos, la pantalla que aparece es la pantalla que teníamos abierta anteriormente.

Para poder manejar pantallas vamos a utilizar el plugin de react-navigation (https://reactnative.dev/docs/navigation).

Primero instalamos las dependencias necesarias:

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-screens
npm install react-native-safe-area-context

Recordad que si añadimos el comando –save en npm install podemos añadirla al fichero de dependencias.

Si queréis añadir directamente estas librerías al fichero packcage.json copiad esto:

 "react-native-screens": "~3.11.1",
 "react-native-safe-area-context": "4.2.4",
 "@react-navigation/native": "^6.0.2",
 "@react-navigation/native-stack": "^6.1.0",

Una vez instaladas ya podemos empezar a probar cómo navegar por las pantallas.

Primero vamos a crear el árbol de navegación dentro del componente App.js (primera pantalla)

import React from "react";
import { View, StyleSheet } from "react-native";

//Librerias de navegación
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

//Importar pantallas (aún no creadas)
import Login from './screens/Login';
import Menu from './screens/Menu';

//Creamos el arbol de navegación
const Stack = createNativeStackNavigator();

//Crear un componente llamado APP
const App = () => {

    return (
        <View style={styles.container}>
    
            <NavigationContainer>
                <Stack.Navigator >
                    <Stack.Screen
                        name="Login"
                        component={Login}
                        options={{ title: 'Login' }}
                    />
                    <Stack.Screen name="Menu" component={Menu} />
                </Stack.Navigator>
            </NavigationContainer>
        </View>)
};

//Exporta el componente
export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

Os voy a explicar el código que he añadido.

Primero importamos las librerías necesarias para utilizar la navegación:

//Librerias de navegación
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Una vez importadas, creamos la variable Stack dónde añadiremos las distintas pantallas por las que vamos a navegar:

const Stack = createNativeStackNavigator();

Y ahora vamos a añadir en la propia vista, las distintas pantallas por las que vamos a poder navegar. No se van a mostrar si no que solo se va a mostrar la primera que indiquemos y las demás estarán ocultas hasta que las abramos desde el código.

   <NavigationContainer>
                <Stack.Navigator >
                    <Stack.Screen
                        name="Login"
                        component={Login}
                        options={{ title: 'Login' }}
                    />
                    <Stack.Screen name="Menu" component={Menu} />
                </Stack.Navigator>
            </NavigationContainer>

Esta estructura tiene un <NavigationContainer> dónde añadimos el <Stack.Navigator> y dentro de él, las distintas pantallas, <Stack.Screen> aquí tendremos que añadir todas las pantallas de la APP para que podamos navegar entre ellas.

Los atributos de Stack.Screen que he añadido son:

• name: Indica el nombre navegable de la pantalla, le pongo Login y cuando queramos abrirlo tendremos que llamar a Login.
• component: indicamos el archivo .js de pantalla que hemos importado (si usamos typescript se hace de la misma forma).
• options: podemos añadir por ejemplo un título que la propia pantalla va a mostrar en la parte superior.

Ahora vamos a crear dos pantallas dentro de la carpeta screen (Crear una pantalla (Screen) con React Native):

Login.json

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

const Login = ({navigation}) => {
    return (
        <View>

            <Text >Login</Text>
            <Button
                title="Iniciar sesión"
                onPress={() =>
                    navigation.navigate('Menu')
                }
            />

        </View>
    )
};

export default Login;

Os explico este código:

En la parte del render del view se recoge el parametro {navigation} dónde vamos a recibir el objeto tipo navigation, ya que esta pantalla forma parte del árbol de navegación de la APP.

Para cambiar de pantalla tendremos que poner navigation.navigate(«Menu») ponemos «Menu» ya que es el nombre que pusimos en la etiqueta name del Stack.Screen anteriormente creado en App.js

                <Stack.Screen name="Menu" component={Menu} />

Ahora ya podemos crear la pantalla Menu.js dentro del directorio Screens.

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

const Menu = ({navigation}) => {
    return (
        <View>

            <Text >Menú</Text>
            <Button
                title="Pulsa para ir al login"
                onPress={() =>
                    navigation.navigate('Login')
                }
            />

        </View>
    )
};

export default Menu ;

Y ya con estas dos pantallas creadas, podremos cambiar de una a otra pulsando en los botones creados.