https://facebook.github.io/react-native/docs/navigator.html

Navigator实现了页面之间的跳转。

Demo描述：打开即进入“课程”页面，点击详情按钮，进入“课程详情”页面，“课程详情”页面点击头部返回按钮返回“课程”页面。

添加 Navigator 的组件<Navigator/>。

设置方法: 初始化路由(initialRoute)，配置场景动画(configureScene)，渲染场景(renderScene)，初始化路由(initialRoute)，使用CourseListView页面作为首页。

//主模块
render() {
const routes = [
{component: CourseListView, name: 'CourseList'}
];
return (

);
}

配置场景动画(configureScene): 根据路由的type属性, 判断使用的动画样式, 底部弹出或右侧弹出，或者官网介绍的其他样式。

configureScene(route, routeStack) {
if (route.type == 'Bottom') {
return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
}
return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
}

渲染场景(renderScene): 使用动态加载组件的方式。 设置加载页面的navigator参数, 其余使用route.passProps属性传递其他参数。可以动态加载组件，也可以静态加载组件。

//使用动态加载组件
renderScene(route, navigator) {
return ;
}

//使用静态加载组件，不是特别灵活，还需要预定义组件
renderScene(route, navigator) {
if (route.name == 'CourseList') {
return
} else if (route.name == 'CourseDetail') {
return
}
}

以上是介绍index.ios.js设置默认路由的方法。

/**
* Created by myz on 16/12/8.
*/
'use strict';

import React, { Component } from 'react';
import {
Navigator,
Text
} from 'react-native';
import {
Button,
Container,
Content,
Header,
Title
} from 'native-base';

import CourseDetailView from './CourseDetailView.js';

export default class CourseListView extends Component {
_navigate(name, type = 'Normal') {
this.props.navigator.push({
component: CourseDetailView,
name: 'CourseDetail',
passProps: {
name: name
},
type: type
})
}

render() {  
    return (  
        <Container>  
            <Header>  
                <Title>课程</Title>  
            </Header>  
            <Content>  
                <Button block style={{marginTop:30}} onPress={()=>this.\_navigate('CourseDetail')}>  
                <Text>我是课程</Text>  
                </Button>  
            </Content>  
        </Container>  
    );  
}  

}

之后再定义_CourseDetailView_组件，这样就可以实现页面跳转了。

_navigate()方法: 导航跳转, 调用navigator.push()方法。 传递参数passProps的name属性, type动画类型, component跳转组件。
跳到指定页面是调用navigator.push()方法；
返回第一页是调用this.props.navigator.pop()，使当前页面出栈，显示上一个栈内页面。

额外添加navigationBar的属性, 自定义设置导航栏, 保持所有页面的导航栏一致. 属性添加<NavigationBar/>标签, 通过routeMapper控制导航栏的功能和样式。

}
/> 

**
NavigationBarRouteMapper用来设置左键LeftButton，右键RightButton，标题Title。**

var NavigationBarRouteMapper = {
// 左键
LeftButton(route, navigator, index, navState) {
if (index > 0) {
return (
{if (index > 0) {navigator.pop()}}}>
);
}
},
// 右键
RightButton(route, navigator, index, navState) {
if (route.onPress)
return (
route.onPress()}> {route.rightText || '右键'}
);
},
// 标题
Title(route, navigator, index, navState) {
return (

);
}
};

同时，当“课程”页面跳转的时候，传递的路由信息有些变化，控制“课程详情”页面导航栏的显示信息。

_onPress() {
alert("我是导航栏右边按钮!");
}

_navigate(name, type = 'Normal') {
this.props.navigator.push({
component: CourseDetailView,
name: '课程详情',
passProps: {
name: name
},
onPress: this._onPress,
rightText: '右边',
type: type
})
}