Instalar react-native-router-flux

Autor: | Última modificación: 24 de agosto de 2022 | Tiempo de Lectura: 3 minutos

¿Sabes cómo puedes instalar react-native-router-flux? En este post, puedes conocer este proceso, además de aprender qué es un componente de navegación en React Native y algunas de las opciones que son compatibles con este framework.

Componente de navegación en React Native

Antes de entras en materia acerca de cómo instalar react-native-router-flux, es necesario recordar qué es un componente de navegación.

En general, es un componente que nos da un poco de control sobre toda la navegación de nuestro proyecto. De hecho, para controlar la navegación de nuestra aplicación hay varias opciones:

  • react navigation: componente recomendado oficialmente por React Native. Sirve tanto para React como para React Native.
  • react router: también sirve tanto para React como para React Native. Está entre los más usados en React Native.
  • react native router flux: componente que vamos a explicar más adelante. Por debajo implementa el primer componente mencionado, react-navigation, pero tiene la ventaja de que su API es mucho más amigable.

Si quieres saber más respecto a estos elementos, te recomendamos que vayas a echarle un vistazo a nuestro post Componente de navegación en React Native, en el que aprenderás qué es y algunas de las opciones que puedes implementar.

Instalar react-native-router-flux

Cabe resaltar que el react-native-router-flux, como ya hemos mencionado, depende del react-navigation; por ende, si este último llega a presentar un bug, seguro que react-native-router-flux va a tener ese mismo error.

De modo que podríamos decir que react-native-router-flux es un envoltorio del componente react-navigation.

Además, si react-navigation implementa una nueva funcionalidad, para poder usarla en react-native-router-flux es necesario esperar que también sea implementada en este complemento de navegación.

Ahora bien, ¿cómo instalar react-native-router-flux? A grandes rasgos, podemos decir que los pasos para llevar a cabo este proceso no representan gran dificultad. De hecho, en GitHub puedes encontrar una guía y toda la información necesaria para instalarlo correctamente.

🔴 ¿Quieres entrar de lleno al Desarrollo Mobile? 🔴

Descubre el Desarrollo de Apps Móviles Full Stack Bootcamp de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Desarrollo de Apps Móviles por una semana

Lo primero que debemos hacer para instalar el componente es escribir en el terminal lo siguiente:

 npm install --save react-native-router-flux

A continuación, vamos a instalar las dependencias correspondientes:

npm install react-native-reanimated 
npm install react-native-gesture-handler 
npm install react-native-screens react-native-safe-area-context 
npm install @react-native-community/masked-view

Por último, vamos a ejecutar el comando npx pod-install para instalar las dependencias de la parte nativa de iOS (en caso, por supuesto, de que lo estemos ejecutando en iOS) y luego npx react-native run-ios para volver a compilar la aplicación.

Ejemplo de react-native-router-flux implementado

En las siguientes imágenes podemos ver dos ejemplos de cómo puede ser la implementación del react-native-router-flux:

Instalar react-native-router-flux 1
Instalar react-native-router-flux 2

En estas pantallas vemos que, inicialmente, se han importado dos nuevos componentes, los cuales han sido creados en su respectiva sección.
Seguido de esto, se ha creado un Router principal y un Stack «root«, para después declarar unas Scene con los componentes que se han creado con anterioridad y se le han asignado una key única, es decir, no puede ser una que haya sido usada antes.
Al final, la propiedad initial es la que le indicará al react-native-router-flux cuál será el componente que se mostrará al inicio de nuestra aplicación.

Aprende más sobre desarrollo de apps móviles

En este post, te hemos explicado cómo puedes instalar react-native-router-flux para que lo puedas implementar como tu componente de navegación en React Native. Ahora bien, si quieres continuar aprendiendo para conseguir convertirte en un experto, debes saber que aún te queda mucho por aprender para dominar las herramientas, lenguajes y plataformas necesarias.

Para profundizar en la información relacionada con este ámbito, no puedes perderte el Desarrollo de Apps Móviles Full Stack Bootcamp. Con esta formación íntegra e intensiva de gran calidad podrás convertirte en un desarrollador mobile profesional en solo 7 meses. Aprenderás de forma teórica y práctica con la guía y el acompañamiento de grandes profesionales en el sector. ¡No lo pienses más y empieza tu proceso de inscripción!

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de aplicaciones sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!