摘要：是一款第三方導(dǎo)航組件。你可以通過(guò)它進(jìn)行合理的視圖組織。使用修改的你的如果是修改對(duì)應(yīng)文件即可。請(qǐng)記住必須在頂級(jí)路由中使用，如果你的鏈接潛入在多個(gè)組件中，你必須確保它能夠冒泡到它的父級(jí)。其他組件推薦本文同步自己的博客

React Native Simple Router是一款第三方導(dǎo)航組件。你可以通過(guò)它進(jìn)行合理的視圖組織。

項(xiàng)目地址

進(jìn)入你的項(xiàng)目目錄，如過(guò)沒(méi)有初始化項(xiàng)目可以react-native init your_project，然后在項(xiàng)目目錄安裝react-native-simple-router。

 npm install react-native-simple-router --save

import Router from "react-native-simple-router";

修改的你的index.ios.js,如果是Android修改對(duì)應(yīng)文件即可。

import React, { StyleSheet } from "react-native";

// 初始化頁(yè)面
class HelloPage extends React.Component {

  render() {
    return Hello world!;
  }

}

const styles = StyleSheet.create({
  header: {
    backgroundColor: "#5cafec",
  },
});

// 在這里定義你的路由
// - 其中name 將會(huì)成會(huì)頂部導(dǎo)航條的標(biāo)題內(nèi)容
// - `component`用于渲染頁(yè)面的組件
const firstRoute = {
  name: "Welcome!",
  component: HelloPage,
};

class MyApp extends React.Component {

  render() {
    return (
      
    );
  }
}

AppRegistry.registerComponent("routerTest", () => MyApp);

接下來(lái)你可以加入更多頁(yè)面，你可以通過(guò)this.props.toRoute()導(dǎo)航至另外一個(gè)組件。

我們定義另外一個(gè)頁(yè)面next.js,代碼很簡(jiǎn)單:

"use strict";

var React = require("react-native");

var {
    StyleSheet,
    View,
    Text,
    Image,
    TextInput,
    Component
} = React;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5,
  },
});

class Next extends Component {
    constructor(props){
        super(props);
    }
    
    render() {
        var me = this;
        return (
          
            
              Welcome to Next Page!
            
          
        );
  }
}


module.exports = Next;

index.ios.js中主要加入下面方法

import React, { StyleSheet, PropTypes } from "react-native";
var Next = require("./next");
const propTypes = {
  toRoute: PropTypes.func.isRequired,
};

class HelloPage extends React.Component {

  constructor(props) {
      super(props);

      this.nextPage = this.nextPage.bind(this);
  }

  nextPage() {
    this.props.toRoute({
      name: "next screen",
      component: Next
    });
  }

  render() {
    return (
      
        
          Next page please!
        
      
    );
  }
}

HelloPage.propTypes = propTypes;

這個(gè)時(shí)候我們點(diǎn)擊 next page 即可導(dǎo)航至next頁(yè)面。請(qǐng)記住this.props.toRoute()必須在頂級(jí)路由中使用，如果你的鏈接潛入在多個(gè)組件中，你必須確保它能夠冒泡到它的父級(jí)。

可以配置下面的屬性:

firstRoute(必須): 你導(dǎo)航的首頁(yè)

headerStyle： 改變你導(dǎo)航條的背景樣式

titleStyle：改變導(dǎo)航條里的文字樣式

bgStyle： 改變所有路由的背景樣式

borderBottomWidth： 底部導(dǎo)航條的寬度

backButtonComponent：默認(rèn)導(dǎo)航條會(huì)呈現(xiàn)一個(gè)back 文本的返回按鈕，當(dāng)然你可以自定義設(shè)置的組件

customAction：

hideNavigationBar： 隱藏導(dǎo)航條

statusBarProps：默認(rèn)獲取狀態(tài)欄的props,可以參考StatusBar Docs.
+

this.props.toRoute()需要傳入一個(gè)對(duì)象作為參數(shù)設(shè)置 。

name：路由的名稱(chēng)，也會(huì)被用在導(dǎo)航條的文本顯示

component(必須)：需要渲染的組件

leftCorner： 從導(dǎo)航左邊開(kāi)始開(kāi)始渲染

rightCorner：則是從右邊渲染相關(guān)組件

titleComponent：指定一個(gè)組件用于替換標(biāo)題，類(lèi)似Ins的第一頁(yè)

headerStyle： 指定新渲染組件的導(dǎo)航條樣式，你可以指定一個(gè)背景色，然后路由轉(zhuǎn)換是會(huì)平滑過(guò)渡

passProps：帶入一組參數(shù)，通常是一個(gè)對(duì)象key-value給新的組件

titleProps：如果你設(shè)置了title為一個(gè)組件，這樣你可以把titleProps的值傳入進(jìn)去。

sceneConfig：控制轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，常見(jiàn)的參數(shù)如下:

Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.PushFromRight
Navigator.SceneConfigs.VerticalDownSwipeJump
Navigator.SceneConfigs.VerticalUpSwipeJump

更多屬性參考可以參閱這里

this.props.replaceRoute的參數(shù)設(shè)置和toRoute一致，但是二者的區(qū)別在于toRoute會(huì)加入到你的堆棧中，而replaceRoute它將會(huì)替換當(dāng)前所在的路由。

如果你是在登錄或者登出的功能，使用replaceRoute會(huì)好過(guò)直接再導(dǎo)航至該路由。

this.props.resetToRoute與toRoute()傳入的參數(shù)一致，而它的差異在于，它會(huì)替換掉當(dāng)前的路由并且清空導(dǎo)航。如果你登錄成功或者注冊(cè)成功后，你并不希望退后，使用resetToRoute則會(huì)非常有用。

一個(gè)簡(jiǎn)單的模仿twitter 的 應(yīng)用，你可以直接使用它，并借鑒它的寫(xiě)法。

import React, { AppRegistry } from "react-native";
import TwitterApp from "./node_modules/react-native-simple-router/examples/twitter-example";

AppRegistry.registerComponent("routerTest", () => TwitterApp);

在node_modules/react-native-simple-router/examples/Explorer里面還有一個(gè)Demo,安裝依賴(lài)后便可以運(yùn)行.

我們可以大致參考作者的目錄架構(gòu)

+ images/
+ style
    + css
    + icons
+ components
+ service
+ pages
+ ios
+ android
- index.ios.js 
- index.android.js
...

react-native-simple-router實(shí)際來(lái)源于react-native-router，但是作者不再更新，因此我們遷移過(guò)來(lái)，不過(guò)你依舊可以在原來(lái)issues找到你有可能遇到的問(wèn)題的答案。

React-Native-Router

React-Native-Button

react-native-gifted-listview

react-native-scrollable-tab-view

本文同步自己的博客：http://www.jackpu.com/shi-yong-react-native-simple-router-zu-zhi-ni-de-react-native-ye-mian/