react-native構建基本頁面3---路由配置

安裝路由

1. 運行yarn add react-native-router-flux
2. 路由官網
3. 路由相關配置
4. 路由簡單的DEMO

// Main 才是項目的根組件

import React, { Component } from 'react'
import { View, Image, Text, ActivityIndicator } from 'react-native'

// 導入路由相關的組件
// Router: 就相當於 我們所學的  HashRouter
// Stack: 這是一個分組的容器，他不表示具體的路由，專門用來給路由分組的
// Scene：就表示一個具體的路由規則，好比  Route
import { Router, Stack, Scene } from 'react-native-router-flux'

// 導入App組件
import App from './App.js'
import MovieList from './components/movie/MovieList.js'
import MovieDetail from './components/movie/MovieDetail.js'

export default class Main extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return <Router sceneStyle={{ backgroundColor: 'white' }}>
      <Stack key="root">
        {/* 配置路由規則 */}
        {/* 注意，所有的路由規則，都應該寫到這個位置 */}
        {/* 第一個 Scene 就是默認要展示的首頁 */}
        {/* key 屬性，表示路由的規則名稱，將來可以使用這個 key ，進行編程式導航，每一個路由規則，都應該提供一個 唯一的key， key不能重復 */}
        <Scene key="app" component={App} title="" hideNavBar={true} />
        {/* 電影列表的路由規則 */}
        <Scene key="movielist" component={MovieList} title="熱映電影列表" />
        <Scene key="moviedetail" component={MovieDetail} title="電影詳情" />
      </Stack>
    </Router>
  }
}