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工场”微信服务号 ，时刻关注我们的最新的技术讯息！ （甭客气！尽情的扫描或者长按！）