React Native Navigation: Stack Navigator

Saludos, he preparado una miniserie para aplicar navegación a nuestra aplicación en React Native.

Este es el primer capítulo de la miniserie, donde veremos el Stack Nigator de React Navigation. Con esto lograremos darle una navegación a nuestra aplicación móvil de manera muy rápida.

Esta librería de React Navigation nos permite darle una navegación a nuestra app, un menú lateral o un bottom tab. Para esta miniserie usaremos la versión 2, si ya han visto la versión 1, notarán que difiere un poco.

Haremos uso de nuestro manejador de paquetes favorito para la instalación. En mi caso npm.

npm install --save react-navigation

Ahora importaremos el paquete que acabamos de instalar. Nótese que usaremos el componente createStackNavigator.

import {createStackNavigator} from 'react-navigation'

Todas las pantallas que necesiten una navegación pueden ser agregadas al Stack Navigator.

const AppNavigator = createStackNavigator({
   Page1: {screen: Page1},
   Page2: {screen: Page2},
 })

En nuestro render mostraremos nuestro de la siguiente manera.

export default class App extends Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}

Ahora para navegar entre las pantallas que agregamos a nuestro Stack, necesitaremos la siguiente función.

this.props.navigation.navigate('Page1')
this.props.navigation.navigate('Page2')

Aquí se puede ver todo el código completo.

Este es el primer capítulo de la serie, en los siguientes trataremos el Bottom Navigator y el Drawer Navigator.

Acá dejo el video de youtube de este tutorial con su respectivo código en GitHub.