React Native - Enrutador

En este capítulo, entenderemos la navegación en React Native.

Paso 1: instalar el enrutador

Para empezar, necesitamos instalar el Router. Usaremos React Native Router Flux en este capítulo. Puede ejecutar el siguiente comando en la terminal, desde la carpeta del proyecto.

npm i react-native-router-flux --save

Paso 2: Solicitud completa

Como queremos que nuestro enrutador maneje toda la aplicación, lo agregaremos index.ios.js. Para Android, puede hacer lo mismo enindex.android.js.

App.js

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Routes from './Routes.js'

class reactTutorialApp extends Component {
   render() {
      return (
         <Routes />
      )
   }
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

Paso 3: agregar enrutador

Ahora crearemos el Routescomponente dentro de la carpeta de componentes. VolveráRoutercon varias escenas. Cada escena necesitarákey, component y title. El enrutador usa la propiedad clave para cambiar entre escenas, el componente se representará en la pantalla y el título se mostrará en la barra de navegación. También podemos configurar elinitial propiedad a la escena que se va a renderizar inicialmente.

Routes.js

import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'

const Routes = () => (
   <Router>
      <Scene key = "root">
         <Scene key = "home" component = {Home} title = "Home" initial = {true} />
         <Scene key = "about" component = {About} title = "About" />
      </Scene>
   </Router>
)
export default Routes

Paso 4: crear componentes

Ya tenemos el Homecomponente de capítulos anteriores; ahora, necesitamos agregar elAboutcomponente. Agregaremos elgoToAbout y el goToHome funciones para cambiar entre escenas.

Home.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

const Home = () => {
   const goToAbout = () => {
      Actions.about()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}>
         <Text>This is HOME!</Text>
      </TouchableOpacity>
   )
}
export default Home

Acerca de.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native'
import { Actions } from 'react-native-router-flux'

const About = () => {
   const goToHome = () => {
      Actions.home()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToHome}>
         <Text>This is ABOUT</Text>
      </TouchableOpacity>
   )
}
export default About

La aplicación representará la inicial Home pantalla.

Puede presionar el botón para cambiar a la pantalla Acerca de. Aparecerá la flecha hacia atrás; puede utilizarlo para volver a la pantalla anterior.