Como usar React Router Native

Una cosa muy importante son las rutas o pantallas de nuestra aplicación para así administrar eficientemente los datos que mostramos de forma nativa. Es muy complicado pero tenemos esta particular librería de React Router Native la cual es particularmente fácil de implementar. Acá les dejo el Github de React Router Native. Es importante comentar que esta librería originalmente es para react y fue adaptada para poder ser usada en react native.

$ yarn add react-router-native

Una vez instalado en nuestro proyecto podremos empezar a usar 

Importacion 

​
NativeRouter

En orden jerárquico el NativeRouter es el componente que envolverá a todas nuestras rutas. Al no contar con un node de donde se inicia la librería, creo su propio componente padre para react native. Este componente siempre debe envolver a los Route.

Route

Los Route son los componentes encargado de crear la rutas para nuestros propios componentes, ellos reciben como propiedades principal “path” que es la ruta que queremos darle a ese componente, “component” es el componente que se renderiza al momento de estar en dicha ruta y el “exact” que indicara si nuestra ruta es exacta; es decir, que si no posee ninguna variable, solo acedera a ella si la ruta introducidad es exactamente la del “path”.

​
Link

Sera como nuestra etiqueta “<a />”, solo que en vez de tener un href, tendremos el “to” el cual igualamos a una ruta. Este componente ya tiene el comportamiento de un botón.

​
BackButton

Funciona muy parecido al link solo que en vez de necesitar una propiedad que le diga a dónde ir, el directamente regresa a la página anterior al historial.

Redirect

Este componente puede llegar a ser muy útil para hacer condicionales dentro de nuestro componente por ejemplo

​
Funciona igual que el link pero este apenas se a renderizado en un componente redireccionará a otra ruta (es importante que no redireccione a la misma ruta porque sino creará un bucle, no falta pero que afectara mucho al rendimiento de la app).


withRouter

Esta función en que lo personal la recomiendo a la hora de gestionar como acceder a otra ruta, funciona como el “connect” de "redux" y la razón es porque al momento de exportar nuestro componente lo envolveremos en el withRouter para que el le pase el "history" como "props" a nuestro componente.

​

Una vez que tengamos esto podremos usar la siguiente función para redireccionar o administrar nuestras rutas. 

​

La cual podemos llamar en cualquier función que tengamos dentro de nuestro componente y así poder jugar mejor sin depender del "Link" o el "Redirect". Evidentemente encontraras casos muy en especifico que estos dos últimos sean mejor para lo que queremos hacer. A continuación un ultimo ejemplo de un caso de botones personalizados que no dependen del "Link". 

​
Bueno eso es todo por ahora señores, soy Leopoldo Montesinos espero hayan aprendido uno cosa u otro me iré para no llegar tarde al trabajo por estar tratando de cambiar de pantallas en mi aplicación… Adiós.




#saladtech @leomdeveloper