React Native - Router

In questo capitolo capiremo la navigazione in React Native.

Passaggio 1: installa il router

Per cominciare, dobbiamo installare il file Router. In questo capitolo useremo React Native Router Flux. È possibile eseguire il seguente comando nel terminale, dalla cartella del progetto.

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

Passaggio 2: intera applicazione

Poiché vogliamo che il nostro router gestisca l'intera applicazione, la aggiungeremo index.ios.js. Per Android, puoi fare lo stesso inindex.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)

Passaggio 3: aggiungi router

Ora creeremo il file Routescomponente all'interno della cartella dei componenti. TorneràRoutercon diverse scene. Ogni scena avrà bisognokey, component e title. Il router utilizza la proprietà chiave per passare da una scena all'altra, il componente verrà visualizzato sullo schermo e il titolo verrà mostrato nella barra di navigazione. Possiamo anche impostare il fileinitial proprietà alla scena che deve essere renderizzata inizialmente.

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

Passaggio 4: creazione di componenti

Abbiamo già il file Homecomponente dei capitoli precedenti; ora, dobbiamo aggiungere il fileAboutcomponente. Aggiungeremo il filegoToAbout e il goToHome funzioni per passare da una scena all'altra.

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

L'app renderà l'iniziale Home schermo.

È possibile premere il pulsante per passare alla schermata Informazioni. Apparirà la freccia Indietro; puoi usarlo per tornare alla schermata precedente.