React Native - Routeur

Dans ce chapitre, nous allons comprendre la navigation dans React Native.

Étape 1: installer le routeur

Pour commencer, nous devons installer le Router. Nous utiliserons le React Native Router Flux dans ce chapitre. Vous pouvez exécuter la commande suivante dans le terminal, à partir du dossier du projet.

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

Étape 2: Application entière

Puisque nous voulons que notre routeur gère l'ensemble de l'application, nous l'ajouterons index.ios.js. Pour Android, vous pouvez faire de même dansindex.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)

Étape 3: Ajouter un routeur

Maintenant, nous allons créer le Routescomposant dans le dossier des composants. Il reviendraRouteravec plusieurs scènes. Chaque scène aura besoinkey, component et title. Le routeur utilise la propriété key pour basculer entre les scènes, le composant sera rendu à l'écran et le titre sera affiché dans la barre de navigation. Nous pouvons également définir leinitial propriété à la scène qui doit être rendue initialement.

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

Étape 4: créer des composants

Nous avons déjà le Homecomposant des chapitres précédents; maintenant, nous devons ajouter leAboutcomposant. Nous ajouterons legoToAbout et le goToHome fonctions pour basculer entre les scènes.

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'application rendra l'initiale Home écran.

Vous pouvez appuyer sur le bouton pour passer à l'écran à propos. La flèche de retour apparaîtra; vous pouvez l'utiliser pour revenir à l'écran précédent.