react-native 使用 react-native-router-flux 進行導航

使用 npm install --save react-native-router-flux 安裝

在 react-native-router-flux 中,每條路由稱為 <Scene>

<Scene key="home" component={LogIn} title="Home" initial />

key 一個唯一的字串,可用於引用特定場景。

component 顯示哪個元件,這裡是它

title 製作一個 NavBar 並給它一個標題’Home'

initial 這是 App 的第一個螢幕

例:

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LogIn from './components/LogIn';
import SecondPage from './components/SecondPage';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="login" component={LogIn} title="Login Form" initial />
      <Scene key="secondPage" component={SecondPage} title="Home" />
    </Router>
  );
};

export default RouterComponent;

在主 App.js(索引檔案)中匯入此檔案並進行渲染。有關更多資訊,請訪問此連結