React Native的Navigator，理解起来相对来说不太容易，经过一些实践之后谈谈我的理解。参考的是这篇文章的代码
零
首先从原理上，Navigator是用来作为组件之间的导航器。而缺乏类似Router性质的东西时，最简单的办法是将下个组件（也叫场景Scene），直接告诉导航器。所以就需要在页面的上面引入下个组件。 另外就是不要忘记引入 Navigator。
一
export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';// 第一个要展示的组件
let defaultComponent = FirstPageComponent;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);
}
}
initialRoute={{ name: defaultName, component: defaultComponent }}
Navigator实现跳转，是通过Push和Pop方法，相当于是一个数组，每要跳到下个Scene（场景），就把下个页面push到这个数组中，当想要后退的时候，再把这个Pop出去。所以这个数组里存放的肯定是能索引到这个Scene的数据，所以理所应当存放一个Component键是合理的。这里initialRoute的时候除了Component还引入了一个name，这个是可选的，不要也行。
defaultName和defaultComponent存放的就是你要render的第一个Scene，相当于跳转的起点，不一定是就是要点击的那个组件，但必须是包含在里面的。
configureScene={(route) => { return Navigator.SceneConfigs.VerticalDownSwipeJump; }}
这里定义了跳转的过渡动画，如果你的编辑器支持的话，可以删掉最后一节，看看最其他的选项。
renderScene={(route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> }}
这个段代码执行过后，就将你的“defaultComponent”渲染出来了，其中route.componet就是在initialRoute里写进去的component。
return <Component {...route.params} navigator={navigator} />
渲染了你要展示的第一个页面，还顺便把几个参数写了进去，...route.params这个语法是要展开所有params，现在你initialRoute的时候没有写 params，但是以后在页面之间传递参数的时候就会要写的。假如，InitialRoute的时候写了：
initialRoute={{ name: defaultName, component: defaultComponent params:{ id:123} }}
这就相当于 ：
return <Component id={route.params.id} navigator={navigator} />
对，就是这么神奇。你会发现就可以在你渲染的页面里，通过this.props.id找到这个参数了，当然还有后面传入的navigator，你也可以在props中找到。
二
现在只是刚刚定义好了导航器而已，在现在这个渲染的组件里，找一个可以Touchable开头的组件，在属性里写个onPress={}属性。假设点击这个组件，就要前往下个页面。
此时导航器需要知道下一个Scene是哪里，所以先在头部将需要跳转的Scene引入。
在点击事件的回调函数里，
_pressButton(id) {
const {navigator} = this.props;
if (navigator) {
navigator.push({
name: 'StoryTeller',
component: StoryTeller,
params: {
id: id
}
})
}
}
const {navigator} = this.props; 这么写相当于 const navigator = this.props.navigator
点击事件发生后，需要要把下个Scene给Push到navigator中，同样还有看起来没什么用的name。注意这里同样传了params，在这里不用手动return出来要加载的页面了，navigator会依照之前的模式，直接开始渲染。相当于：
<StoryTeller id={id} name='StoryTeller' navigator={this.props.navigator} />
三
跳回来，使用的是Pop方法。和Push类似，不过不用写参数：
onBackAndroid = ()=> {
const nav = this.props.navigator;
const routers = nav.getCurrentRoutes();
if (routers.length > 1) {
nav.pop();
}
};
navigator 对象里最后进去的，一定是当前的页面，所以初始化的时候数组的长度为1，这里有一个判断，当这个数组的=1的时候，就不再跳转，直接执行退出应用。这里适合具有多次点击返回时候(例如安卓返回键)，一般的点击返回直接执行navigator的Pop方法即可。
_pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.pop();
}
}
