NavigatorIOS 顧名思義和OC的UINavigationController一樣宇姚，這是React對原生導(dǎo)航欄的包裝匈庭，當(dāng)然React自身也有類似的控件Navigator，后面會講到浑劳。這里先簡單介紹一下NavigatorIOS的一些基本屬性：

        1.初始化路由
          initialRoute={{
            component: function, //加載的視圖組件
            title: string,  //當(dāng)前視圖的標(biāo)題
            passProps: object, //傳遞的數(shù)據(jù)
            backButtonIcon: Imaget.propTypes.source, //后退按鈕圖標(biāo)
            backButtonTitle: string, //后退按鈕標(biāo)題
            leftButtonIcon: Image.propTypes.source, //左邊按鈕圖標(biāo)
            leftButtonTitle: string,  //左邊按鈕的標(biāo)題
            onLeftButtonPress: function,  //左邊按鈕點(diǎn)擊事件
            rightButtonIcon: Image.propTypes.source, //右邊按鈕圖標(biāo)
            rightButtonTitle: string,  //右邊按鈕的標(biāo)題
            onRightButtonPress: function,  //右邊按鈕點(diǎn)擊事件
            wrapperStyle: [object Object] //包裹樣式
          }}
        2.barTintColor 導(dǎo)航條的背景顏色  
        3.itemWrapperStyle 為每一項(xiàng)定制樣式阱持，例如設(shè)置每個頁面的背景顏色
        4.navigationBarHidden 當(dāng)其值為true時，隱藏導(dǎo)航欄
        5.shadowHidden 是否隱藏陰影魔熏，值為true或false
        6.tintColor 導(dǎo)航欄上按鈕的顏色
        7.titleTextColor 導(dǎo)航欄上字體的顏色
        8.translucent 導(dǎo)航欄是否是半透明的衷咽，其值true或false

在組件視圖切換時，navigator會作為一個屬性對象被傳遞蒜绽。我們可以通過this.prop.navigator來獲得navigator對象镶骗。這個很重要，navigator的主要方法如下：

    push(route) 加載一個新的頁面(視圖或者是路由)躲雅，并且路由到該頁面
    pop() 返回到上一頁面
    popN(n) 一次性返回N個頁面鼎姊，當(dāng)N=1時，即相當(dāng)于pop()
    replace(route) 替換當(dāng)前路由
    replacePrevious(route) 替換前一個頁面的視圖并回退過去
    resetTo(route) 取代最頂層的路由并且回退過去
    popToTop() 回到最上層視圖

基本上這些屬性還是比較好理解的，有不明白的等下在示例中再慢慢體會此蜈。例子是從列表頁跳到詳情頁即横，如下圖所示：

屏幕快照 2016-05-05 上午9.55.37.png

屏幕快照 2016-05-05 上午9.55.56.png

為了實(shí)現(xiàn)這個功能，需要三個組件：APP入口組件裆赵、 列表頁組件东囚、 詳情頁組件

1.入口組件
首先加載NavigatorIOS組件，并將其作為路由跳轉(zhuǎn)的入口.

/*
  component:List 這里為NavigatorIOS組件配置了一個初始化路由List战授，
                 這樣頁面啟動時就會加載List組件
*/
var NV = React.createClass({
  render: function(){
    return (
      <NavigatorIOS
        style = {{flex:1}}
        initialRoute={{
          component:List,
          title: '郵輪',
          passProps: {},
        }}
      />
    );
  }
});

2.列表頁組件

var List = React.createClass({

  render: function (){
    return (
      <ScrollView style={styles.flex}>
        <Text style={styles.listItem} onPress={this.goTo}>?豪華郵輪濟(jì)州島3日游</Text>
        <Text style={styles.listItem} onPress={this.goTo} >?豪華郵輪臺灣3日游</Text>
        <Text style={styles.listItem} onPress={this.goTo}>?豪華郵輪地中海8日游</Text>
      </ScrollView>
    );
  },

  goTo: function(){
    this.props.navigator.push({
      component:Detail,
      title:'郵輪詳情',
      rightButtonTitle:'購物車',
      onRightButtonPress: function() {
        alert('進(jìn)入我的購物車');
      }
    });
  }

});

3.詳情頁

var Detail = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <Text>詳情頁</Text>
        <Text>盡管信息很少页藻，但這就是詳情頁</Text>
      </ScrollView>
    );
  }
});