Navigator路由

我们都玩过各种APP 那么APP里面各个板块（页面）之间的路由切换 是如何做的呢？那么我先说说网页里面是如何做的吧 网页代码：

  

    
首页
 
    
列表
    
发现
  
    
购物车
  
    
个人中心
  
  

很明显网页中 路由的切换跳转都是由href='xxx'跳转来完成
但是href在APP开发里面可不好使 href是浏览器里面a标签属性 APP里面可没有a标签 那么APP开发里面的页面跳转（路由跳转）是如何实现的呢
这就是我要讲的react-native里面的Navigator组件了。

开始

首先我们看看Navigator在render方法里的最终代码 然后在慢慢解释

render() {
    return (
      
    );
}

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 ;
}

使用

1.在当前组件内 可以这样来控制路由的切换

this._navigator.push({name: 'cart'});

2.在路由 子模块里面通过props来获取navigator

this.props.navigator.push({name: 'home'});

效果：

bbb.gif