14.React Native实战之Navigator组件初探
一个应用往往是由多功能视图组成！多页面的切换：路由或导航
在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 ( <Navigator initialRoute={{ name: defaultName, component: defaultComponent }} //配置场景 configureScene= { (route) => { //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js return Navigator.SceneConfigs.VerticalDownSwipeJump; } } renderScene={ (route, navigator) => { let Component = route.component; return <Component {...route.params} navigator={navigator} /> } } /> ); } } class List extends Component { constructor(props) { super(props); this.state = {}; } _pressButton() { const { navigator } = this.props; //为什么这里可以取得 props.navigator?请看上文: //<Component {...route.params} navigator={navigator} /> //这里传递了navigator作为props if(navigator) { navigator.push({ name: 'Detail', component: Detail, }) } } render(){ return ( <ScrollView style={styles.flex}> <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >☆ 豪华邮轮济州岛3日游</Text> <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪华邮轮台湾3日游</Text> <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪华邮轮地中海8日游</Text> </ScrollView> ); } } class Detail extends Component{ constructor(props){ super(props); this.state={}; } _pressButton(){ const{navigator}=this.props; if(navigator){ //很熟悉吧，入栈出栈，把当前的页面pop掉，这里就返回到了上一个页面：List了 navigator.pop(); } } render(){ return( <ScrollView> <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>点击我可以跳回去</Text> </ScrollView> ); } } 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);
