React-Native學習十八：Navigator

Navigator處理你的app中不同頁面的切換。它使用JavaScript實作，在iOS和Android中都可用。如果僅僅用于iOS，你也可以使用NavigatorIOS，因為它使用的是本地的UIKit導航；

一、屬性和方法

名稱	類型	說明
initialRoute	object	導航的初始route（第一個顯示的）；
initialRouteStack	object	導航的route集合，如果initialRoute沒有設定，這個屬性是必填的。如果這個屬性沒有，它将會預設傳遞一個僅僅包含initialRoute的集合；
renderScene	function	必填的方法，它根據給定的ruote渲染夜間，将被使用route和navigator對象參數調用；
navigationBar	view	導航的可選元件導航标題欄，需要設定左按鈕，右按鈕和标題屬性。這個元件将會擷取兩個屬性：navigator和navState代表導航元件和它的狀态。這個元件當ruote改變的時候會重新渲染；
configureScene	function	可選的方法，你可以通過它配置頁面切換的動畫和手勢。将會使用route和routeStack參數調用，route代表導航目前顯示的頁面，routeStack是導航目前展示的route集合；

二、執行個體

index.android.js檔案：

'use strict';
var React = require('react');
var ReactNative = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  Navigator,
  Text,
  Image,
  TouchableOpacity,
} = ReactNative;

//引入子頁面
var Page1 = require('./Page1');
var Page2 = require('./Page2');
var Page3 = require('./Page3');

//設定導航欄
var NavigationBarRouteMapper = {
  //設定導航欄左按鈕
  LeftButton: function(route,navigator,index,navState) {
    if(index === 0){
      return null;
    }else{
      return(
        <TouchableOpacity style={styles.navBarLeftButton} onPress={()=>{try{navigator.jumpBack();}catch(error){}}}>
          <Text style={[styles.navBarText, styles.navBarButtonText]}>Back</Text>
        </TouchableOpacity>
      );
    }
  },

  //設定導航欄标題
  Title: function(route,navigator,index,navState) {
    return (<Text style={[styles.navBarText, styles.navBarTitleText]}>{route.title}</Text>);
  },
  
  //設定導航欄右按鈕
  RightButton: function(route,navigator,index,navState) {
    if(index === navState.routeStack.length - 1){
      return null;
    }else{
       return(
         <TouchableOpacity style={styles.navBarRightButton} onPress={()=>{navigator.jumpForward();}}>
           <Text style={[styles.navBarText, styles.navBarButtonText]}>Next</Text>
         </TouchableOpacity>
       );
    }
  }
};

var MyAwesomeApp = React.createClass ({
  //設定導航子頁面切換動畫
  configureScence: function(route) {
    return Navigator.SceneConfigs.FadeAndroid;
  },
  
  //設定導航子頁面導航路由方式
  renderScene: function(route, navigator) {
    this._navigator = navigator;
    switch(route.name) {
      case 'Page1':
        return <Page1 navigator={navigator}/>;
      case 'Page2' :
        return <Page2 navigator={navigator} />;
      case 'Page3' :
        return <Page3 navigator={navigator} />;
    }
  },

  render: function() {
    const routes = [
      {name: 'Page1', title: 'Title1', index: 0},
      {name: 'Page2', title: 'Title2', index: 1},
      {name: 'Page3', title: 'Title3', index: 2},
    ];

    return( 
      //傳回導航欄視圖，并通過initialRoute顯示第一次顯示的子頁面，initialRouteStack導航欄的子頁面路由棧，configureScence導航欄子頁面切換動畫，navigationBar導航欄标題欄實作，renderScene導航欄路由方式
      <Navigator
        style={styles.nav}
        initialRoute={routes[0]}
        initialRouteStack={routes}
        configureScence={this.configureScence}
        navigationBar={<Navigator.NavigationBar style={styles.navBar} routeMapper={NavigationBarRouteMapper}/>}
        renderScene={this.renderScene}/>
    );
  }
});

var styles = StyleSheet.create({
  nav: {
     flex: 1,
  },
  navBar: {
    backgroundColor: 'white',
  },
  navBarText: {
    fontSize: 16,
    marginVertical: 10,
  },
  navBarTitleText: {
    color: '#373E4D',
    fontWeight: '500',
    marginVertical: 9,
    marginLeft: 103,
  },
  navBarLeftButton: {
    paddingLeft: 10,
  },
  navBarRightButton: {
    paddingRight: 10,
  },
  navBarButtonText: {
    color: '#5890FF',
  },
});

AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);
           

Page1.js檔案（其它Page2.j、Page3.js代碼類似）

'use strict';
var React = require('react');
var ReactNative = require('react-native');

var {
  StyleSheet,
  View,
  Text,
} = ReactNative;

var Page1 = React.createClass ({
  render: function() {
    return(
        <View style={styles.container}>
          <Text style={styles.pagetext}>page1Content</Text>
        </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  pagetext: {
    fontSize: 16,
     fontWeight: '500',
  }
});

module.exports = Page1;
           

三、運作結果：

注意：在實際的開發過程中，你可能需要在不同的頁面（route）之間進行傳值，比如選擇圖檔組，将選中的圖檔組的資訊傳遞到圖檔組預覽頁面。實作如下：

1.修改路由定義，添加傳遞數值的字段；

const routes = [
      {name: 'MyHotel', title: '我的酒店', index: 0},
       ... ...
      //photosGroup路由之間傳遞的值
      {name: 'SelectPhoto', title: '選擇相片', index: 5, photosGroup:''},
    ];
           

2.在使用navigator.push中傳遞photosGroup給renderScene方法處理；

this.props.navigator.push({name: "SelectPhoto",title:photosGroup.name,photosGroup:photosGroup});
           

3.需改renderScene函數，将route中的傳遞資訊，以屬性傳遞給下一個頁面元件；

renderScene: function(route, navigator) {
    this._navigator = navigator;
    switch(route.name) {
      case 'MyHotel':
        return <MyHotel navigator={navigator}/>;
      ... ...
      case 'SelectPhoto' :
        //将route中傳遞的值photosGroup，以屬性photosGroup傳遞給新的頁面元件SelectPhoto
        return <SelectPhoto navigator={navigator} photosGroup={route.photosGroup}/>;
    }
  },
           

4.在子頁面，使用this.props. photosGroup就可以通路路由之間傳遞的資料；

render: function() {
    return(
      <View style={styles.container}>
        <Text style={styles.pagetext}>{this.props.photosGroup.name}</Text>
        <Text style={styles.pagetext}>{this.props.photosGroup.count}</Text>
        <Text style={styles.pagetext}>{this.props.photosGroup.imageUri}</Text>
      </View>
    );
  }
           

新技術，新未來！歡迎大家關注 “1024工場”微信服務号 ，時刻關注我們的最新的技術訊息！ （甭客氣！盡情的掃描或者長按！）