React Native - Roteador

Neste capítulo, entenderemos a navegação no React Native.

Etapa 1: instalar o roteador

Para começar, precisamos instalar o Router. Usaremos o React Native Router Flux neste capítulo. Você pode executar o seguinte comando no terminal, a partir da pasta do projeto.

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

Etapa 2: aplicativo inteiro

Como queremos que nosso roteador lide com todo o aplicativo, vamos adicioná-lo em index.ios.js. Para Android, você pode fazer o mesmo emindex.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)

Etapa 3: adicionar roteador

Agora vamos criar o Routescomponente dentro da pasta de componentes. Vai voltarRoutercom várias cenas. Cada cena vai precisarkey, component e title. O roteador usa a propriedade key para alternar entre as cenas, o componente será renderizado na tela e o título será mostrado na barra de navegação. Também podemos definir oinitial propriedade para a cena que será renderizada 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

Etapa 4: criar componentes

Nós já temos o Homecomponente de capítulos anteriores; agora, precisamos adicionar oAboutcomponente. Nós vamos adicionar ogoToAbout e a goToHome funções para alternar entre as cenas.

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

About.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

O aplicativo irá renderizar o Home tela.

Você pode pressionar o botão para alternar para a tela sobre. A seta Voltar aparecerá; você pode usá-lo para voltar à tela anterior.