Учебники

React Native — Маршрутизатор

Сентябрь 19, 2018

В этой главе мы разберем навигацию в React Native.

Шаг 1: Установите маршрутизатор

Для начала нам нужно установить роутер . Мы будем использовать React Native Router Flux в этой главе. Вы можете запустить следующую команду в терминале из папки проекта. 

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

Шаг 2: все приложение

Поскольку мы хотим, чтобы наш маршрутизатор обрабатывал все приложение, мы добавим его в index.ios.js . Для Android вы можете сделать то же самое в index.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)

Шаг 3: Добавить маршрутизатор

Теперь мы создадим компонент Routes внутри папки компонентов. Вернется роутер с несколькими сценами. Каждая сцена будет нуждаться в ключе, компоненте и заголовке . Маршрутизатор использует свойство ключа для переключения между сценами, компонент будет отображаться на экране, а заголовок будет отображаться на панели навигации. Мы также можем установить начальное свойство для сцены, которая должна отображаться изначально.

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

Шаг 4: Создание компонентов

У нас уже есть компонент Home из предыдущих глав; Теперь нам нужно добавить компонент About . Мы добавим функции goToAbout и goToHome для переключения между сценами.

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

Приложение отобразит начальный экран.

React Native Router

Вы можете нажать кнопку, чтобы перейти к экрану «О программе». Появится стрелка назад; Вы можете использовать его, чтобы вернуться к предыдущему экрану.

53
Share: