(Si te perdiste el capítulo 4 de este tutorial, puedes encontrarlo en este link)

Parte 5 de 8!
En los capítulos anteriores, creamos nuestro proyecto de RN, definimos nuestra estructura de carpeta, creamos un par de componentes, y estamos listos para aprender como funciona el “Navigator” de React Native y movernos entre Rutas.

Navigator

“Navigator” es un componente oficial de React Native que nos permite movernos entre las rutas, o “Escenas” de una aplicación, para lograr esto, vamos a cambiar nuestro componente en el archivo “index.io.js” por lo siguiente:

<View style={styles.container}>
<Navigator
initialRoute={{ name: 'Login' }}
style={styles.nav}
renderScene={ this.renderScene }
/>
</View>

Así como agregar un método dentro del componente que nos servirá para definir que componentes cargar en cada caso.

renderScene(route, navigator) {
if(route.name === 'Login') {
return <Login navigator={navigator} />
}
if(route.name === 'Dashboard') {
return <Dashboard navigator={navigator} />
}
},

Recuerda que tienes que importar el componente “Navigator” y ambos componentes para poder utilizarlo en nuestra aplicación, y un estilo para el Navigator:

import {
AppRegistry,
StyleSheet,
View,
Navigator,
} from ‘react-native’;
import Login from './src/components/Login';
import Dashboard from './src/components/Dashboard';
{(...)}nav: {
flex:1,
alignSelf: 'stretch'
}

Si recargas tu aplicación deberías ver tu componente “Login”.

Login! … Ahora mediante el Navigator!! :D

Cambiando de Ruta

Ok, ya tenemos un componente Navigator listo para controlar las rutas de nuestra app, pero… como nos movemos entre rutas?

En la función renderScene, a cada componente le estamos pasando un prop con la variable navigator, esa variable nos permite controlar el Navigator para poder cambiar de rutas.

Vamos a irnos al componente Login, recibir ese prop, y utilizarlo, cambia la función onPress del botón de Submit por lo siguiente:

onPress={() =>{
if(
this.state.text.toLowerCase() === 'hola' &&
this.state.password === 'mundo'
){
this.props.navigator.push({name:'Dashboard', index:1});
} else {
alert('Wow… Usuario inválido')
}
}};

Recarga la app, y logueate!

Navigator tiene muchas más opciones, si quieres conocer como configurarlo a tu gusto, puedes seguir el siguiente link donde hay una explicación mucho más detallada del funcionamiento y su API.

https://facebook.github.io/react-native/docs/navigator.html

¿No es genial? Ya tenemos nuestro Navigator instalado, aprendimos movernos entre rutas sin problemas, y hasta ahora no hemos usado ningún otro componente externo a React Native, pero eso está a punto de cambiar. En el siguiente tutorial veremos como integrarnos con Auth0 para así externalizar nuestro sistema de autenticación.

Si quieres revisar el código fuente para este post, acá → https://github.com/fforres/react-native-auth-0-tutorial/tree/5_navigator_and_routes


Si tienes cualquier otra duda o consulta, recuerda que siempre puedes hacer preguntas en los comentarios, o en nuestro slack de Noders.

Si aun no tienes acceso, puedes pedir tu invitación acá.


NodersJS

¿Por qué? Porque nos gusta.

Felipe Andrés Torres Sepu

Written by

JS Engineer by choice, Educator at heart. I co-run @javascriptChile and @Noders — Make Development Great Again

NodersJS

NodersJS

¿Por qué? Porque nos gusta.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade