我们都玩过各种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