Rutas con React Navigation y React Native

Introducción

En este artículo, abordare un ejemplo para navegar por las pantallas de las aplicaciones móviles utilizando React Navigation en una aplicación de React Native.

Lo primero que tenemos que hacer es crear nuestra aplicación React Native con el siguiente comando:

react-native init JusticeLeageApp

Instalación React Navigation

yarn add @react-navigation/native

Para poder hacer uso de React Navigation además necesitamos las siguientes dependencias

1. react-native-gesture-handler
2. react-native-reanimated
3. react-native-screens
4. react-native-safe-area-context
5. @react-native-community/masked-view

Instalando dependencias

yarn add react-native-gesture-handler \
react-native-reanimated \
react-native-screens \
react-native-safe-area-context \
@react-native-community/masked-view

En versiones de React Native 0.60 o mayores, vincular las dependencias con sus respectivos pods (Dependencias iOS) se hace automáticamente.

Finalmente si estamos desarrollando para iOS como lo es en este caso, se tienen que instalar los pods con el gestor de dependencias Cocoapods, eso lo hacemos con el comando

npx pod-install ios

Instalación de React Stack Navigator

Está librería nos da la posibilidad de movernos de pantalla en pantalla dentro de nuestra app. Para poder utilizar la librería es necesario que la instalemos con el siguiente comando

yarn add @react-navigation/stack

Escribiendo el Código de nuestro ejemplo

Para iniciar a escribir el código de nuestra app procederemos a crear el folder ./src/screens , en este colocaremos el código perteneciente a cada una de las pantallas de nuestra app.

La primera de nuestras pantallas será HomeScreen.js y es la pantalla inicial de nuestra aplicación

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

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

export default class HomeScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <Text>Justice Leage</Text>
        <Text>No hay integrantres</Text>
        <Button
          title="Agregar integrantes"
          onPress={() => navigation.navigate('Add member')}
        />
      </View>
    );
  }
}

La segunda y ultima de nuestras pantallas será AddMemberScreen.js

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

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

export default class AddMember extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>En esta pantalla agregaremos integrantes a Justice League</Text>
      </View>
    );
  }
}

Ahora vamos a nuestro archivo App.js y generamos la configuración de nuestro navigator el cual contendrá dos rutas que listo a continuación.

• home
• add-member

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './src/screens/HomeScreen';
import AddMemberScreen from './src/screens/AddMemberScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="home" component={HomeScreen} />
        <Stack.Screen name="add-member" component={AddMemberScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Ejecutando la nuestra aplicación

Para ejecutar nuestra aplicación en el emulador de iOS ejecutamos el siguiente comando

react-native run-ios