React-Native学习十八：Navigator

Navigator处理你的app中不同页面的切换。它使用JavaScript实现，在iOS和Android中都可用。如果仅仅用于iOS，你也可以使用NavigatorIOS，因为它使用的是本地的UIKit导航；
一、属性和方法

名称	类型	说明
initialRoute	object	导航的初始route（第一个显示的）；
initialRouteStack	导航的route集合，如果initialRoute没有设置，这个属性是必填的。如果这个属性没有，它将会默认传递一个仅仅包含initialRoute的集合；
renderScene	function	必填的方法，它根据给定的ruote渲染夜间，将被使用route和navigator对象参数调用；
navigationBar	view	导航的可选组件导航标题栏，需要设置左按钮，右按钮和标题属性。这个组件将会获取两个属性：navigator和navstate代表导航组件和它的状态。这个组件当ruote改变的时候会重新渲染；
configureScene	可选的方法，你可以通过它配置页面切换的动画和手势。将会使用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,navstate) {
    return (<Text style={[styles.navBarText,styles.navBarTitleText]}>{route.title}</Text>);
  },//设置导航栏右按钮
  RightButton: function(route,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,} = 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,}
});

module.exports = Page1;

三、运行结果：

React-Native学习十八：Navigator

相关文章