我们都玩过各种APP 那么APP里面各个板块（页面）之间的路由切换 是如何做的呢？那么我先说说网页里面是如何做的吧 网页代码：
<div>
<ul>
<li><a href='home.html'>首页</a></li>
<li><a href='list.html'>列表</a></li>
<li><a href='find.html'>发现</a></li>
<li><a href='cart.html'>购物车</a></li>
<li><a href='my.html'>个人中心</a></li>
</ul>
</div>
很明显网页中 路由的切换跳转都是由href='xxx'跳转来完成
但是href在APP开发里面可不好使 href是浏览器里面a标签属性 APP里面可没有a标签 那么APP开发里面的页面跳转（路由跳转）是如何实现的呢
这就是我要讲的react-native里面的Navigator组件了。
开始
首先我们看看Navigator在render方法里的最终代码 然后在慢慢解释
render() {
return (
<Navigator
initialRoute={{name:'home'}}
configureScene={this.configureScene}
renderScene={this.renderScene.bind(this)} />
);
}
initialRoute 设置默认路由模块 参数是object形式
{
name:'xxx', // 模块名称
index:0, //模块索引
}
configureScene 用来配置场景动画和手势,也就是设置路由切换时过度的动画 例如：
configureScene(route){
return Navigator.SceneConfigs.FadeAndroid; //淡入淡出
}
renderScene 用来渲染指定路由的场景。调用的参数是路由和导航器
renderScene(router, navigator){
var Mod = router.component;
this._navigator = navigator;
switch(router.name){
case "cate": Mod = Cate; break;
case "find": Mod = Find; break;
case "cart": Mod = Cart; break;
case "my": Mod = My; break;
default: Mod = Home; break;
}
return <Mod navigator={navigator} />;
}
使用
1.在当前组件内 可以这样来控制路由的切换
this._navigator.push({name: 'cart'});
2.在路由 子模块里面通过props来获取navigator
this.props.navigator.push({name: 'home'});
效果：
bbb.gif
