一个应用往往是由多功能视图组成！多页面的切换：路由或导航

在RN中专门负责视图切换的组件：Navigator,NavigatorIOS导航器对比：

Navigator和NavigatoriOS 都可以用来管理应用中“场景”的导航（也可以称作屏幕）。

导航器建立了一个路由栈，用来弹出，推入或者替换路由状态。他们和HTML5中的history API很类似。主要的区别在于NavigatorIOS使用了ios中的UINavigationController类，而Navigator则完全用js重写了一个类似功能的React组件。因此Navigator可以兼容IOS和Android,而NavigatorIOS只用于ios.

 

NavigatorIOS

轻量，受限的API设置，使其相对Navigator来说不太方便定制。

由开源社区主导开发---React Native的官方团队并不在自己的应用中使用。

对于大多数正式的App开发，我们建议使用Navigator---使用Navigatorios实现复杂的需求很容易碰到麻烦。

 

导航器通过路由对象来分辨不同的场景。利用renderScene方法，导航栏可以根据指定的路由来渲染场景。

可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或手势。

 

 

最后的几行：

renderScene={

            (route, navigator) =>

             {

            let Component = route.component;

            return <Component {...route.params} navigator={navigator} />

          }

          } />

这里是每个人最疑惑的，我们先看到回调里的两个参数：route,navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货，navigator是一个Navigator的对象，为什么呢，因为它有push,pop ,jump…等方法，这是我们等下用来跳转页面用的那个navigator对象。

 

return <Component {...route.params} navigator={navigator} />

这里有一个判断，也就是如果传递进来的component存在，那我们就是返回一个这个component,结合前面initialRoute的参数，我们就是知道，这是一个会被render出来给用户看到的component,然后navigator作为props传递给了这个component.

所以下一步，我们可以直接拿到这个props.navigator:

 

 D:\APPwork\zqf\ZhangqfTest\node_modules\react-native\Libraries\CustomComponents\Navigator\NavigatorSceneConfigs.js

1.index.android.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  //Component,  StyleSheet,  PixelRatio,  Navigator,  ScrollView,  Text,  View} from 'react-native'; class ZhangqfTest extends Component {  render() {      let defaultName='List';      let defaultComponent=List;    return (        
     
       {            //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js            return Navigator.SceneConfigs.VerticalDownSwipeJump;          }          }            renderScene={            (route, navigator) =>             {            let Component = route.component;            return 
                }          } />    );  }}class List extends Component {    constructor(props) {        super(props);        this.state = {};    }    _pressButton() {        const { navigator } = this.props;        //为什么这里可以取得 props.navigator?请看上文:        //
                     //这里传递了navigator作为props        if(navigator) {            navigator.push({                name: 'Detail',                component: Detail,            })        }    }    render(){        return (            
                     
       
        ☆ 豪华邮轮济州岛3日游
                       
       
        ☆ 豪华邮轮台湾3日游
                       
       
        ☆ 豪华邮轮地中海8日游
                   
              );    }}class Detail extends Component{  constructor(props){    super(props);    this.state={};  }_pressButton(){    const{navigator}=this.props;    if(navigator){        //很熟悉吧，入栈出栈，把当前的页面pop掉，这里就返回到了上一个页面：List了        navigator.pop();    }}render(){    return(      
              
       
        点击我可以跳回去
             
          );}}const styles = StyleSheet.create({ list_item:{   height:40,   marginLeft:10,   marginRight:10,   fontSize:20,   borderBottomWidth:1,   borderBottomColor:'#ddd',   justifyContent:'center', },flex:{  flex:1,},});AppRegistry.registerComponent('ZhangqfTest', () => ZhangqfTest);