Native reagieren - Router

In diesem Kapitel werden wir die Navigation in React Native verstehen.

Schritt 1: Installieren Sie den Router

Zunächst müssen wir das installieren Router. In diesem Kapitel wird der React Native Router Flux verwendet. Sie können den folgenden Befehl im Terminal im Projektordner ausführen.

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

Schritt 2: Gesamte Bewerbung

Da unser Router die gesamte Anwendung verarbeiten soll, fügen wir sie hinzu index.ios.js. Für Android können Sie dasselbe in tunindex.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)

Schritt 3: Router hinzufügen

Jetzt werden wir die erstellen RoutesKomponente im Komponentenordner. Es wird zurückkehrenRoutermit mehreren Szenen. Jede Szene wird brauchenkey, component und title. Der Router verwendet die Schlüsseleigenschaft, um zwischen Szenen zu wechseln. Die Komponente wird auf dem Bildschirm gerendert und der Titel wird in der Navigationsleiste angezeigt. Wir können das auch einstelleninitial Eigenschaft für die Szene, die anfänglich gerendert werden soll.

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

Schritt 4: Komponenten erstellen

Wir haben schon die HomeKomponente aus früheren Kapiteln; Jetzt müssen wir das hinzufügenAboutKomponente. Wir werden das hinzufügengoToAbout und die goToHome Funktionen zum Umschalten zwischen Szenen.

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

Die App rendert die Initiale Home Bildschirm.

Sie können die Taste drücken, um zum Info-Bildschirm zu wechseln. Der Zurück-Pfeil wird angezeigt. Sie können es verwenden, um zum vorherigen Bildschirm zurückzukehren.