Navigator讲解
创建文档时间：2016.3.22-09:00
作者：三月懒驴
使用平台：Mac
作用
Navigator是一个APP必备的东西，用户在APP里面跳来跳去，开发者当然要全都掌握！因此，用上Navigator必须的。
继续在我们的项目作用的lesson新建一个文件：navigator.js
//in index.ios.js
import Nav from './component/ios/navigator'
class MyProject extends Component{
render(){
return(
<Nav />
)
}
}
//in navigator.js
'use strick'
import React from 'react-native'
//昨天写的那个登陆界面
import Home from './login'
let {Component,StyleSheet,View,Text,Navigator} = React
class NavigatorComponent extends Component{
render(){
//这三个参数需要重点说的
let initialRoute = {name:"home",component:Home}
let configureScene = (route) => { return Navigator.SceneConfigs.HorizontalSwipeJump}
let renderScene = (route,navigator)=>{
let Item = route.component
return <Item {...route.params} navigator={navigator} />
}
return(
<Navigator
initialRoute = {initialRoute}
configureScene = {configureScene}
renderScene = {renderScene}
/>
)
}
}
export default NavigatorComponent
initialRoute
定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象！这个其实就是一个对象，有name和component两个属性。可以这么理解。每一个页面都是一个route对象，这个对象有两个参数，一个就是name，用来给他一个名字来辨认，另一个就是component，这个是他的样貌，待会用到的render出来就是我们看到的页面。
configureScene
转场动画和手势，在/node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js可以找到其他动画的定义。直接调用就好
renderScene
重点：渲染指定的路由。重点，但是不难理解。rederScene传来两个参数：route/ navigator。route就是我们上面说的route对象，有name／component两个参数。而navigator作用很多，这个就待会再说，我们把定义在route的component取出来之后，把nagavitor和route的一些参数做为props写入组件去。这样我们就可以在具体的component里面取出这些props来用了。
关于：{...route.params}。这是JSX的展开属性，这里就是：这个语法是把 routes.params 里的每个key作为props的一个属性。具体可以看这里：看我
//回到昨天写好的login.js去
//另外我们在昨天做布局的时候还写了一个lesson_1的js
//于是就用它来做页面2。
import Lesson from './lesson_1'
class LoginBlock extends Component{
//构造函数，一进来就调用
constructor(props){
//获取props和定义state
super(props)
this.state = {}
}
_onPressButton(){
const {navigator} = this.props
if(navigator){
let route = {name:'测试',component:Lesson}
navigator.push(route)
}
}
render(){...}
}
//如果没记错的话，昨天在TouchableHighlight里面写onPress没有绑定this。所以应该在哪里改成，如果不改就没办法获取到this.props
<TouchableHighlight onPress={this._onPressButton.bind(this)} ...>
push
这个navigator的几大方法之一，就像栈一样，当你跳去第二个页面的时候，会给你把页面压入栈去，待会在第二个页面调用了pop的话，又可以出栈回到原来的页面
pop
课间作业：试试在昨天的Lesson加一个touchableHighlight来pop回到login页面去。
IOS上的便捷
有社区主导的NavigatorIOS，也包含在RN里面，而去还包含了UIKit的导航功能。所以用这个的话，比起上面那个更加便捷。起码在创建的时候很方便。涉及到ES6的新语法也不多。
//新建的navigatorIOS
'use strict'
import React from 'react-native'
import Home from './login'
let {Component,StyleSheet,View,Text,NavigatorIOS} = React
class Nav extends Component{
render(){
return(
<NavigatorIOS
style = {styles.body}
initialRoute={{
title: '主页',
component: Home
}}
>
</NavigatorIOS>
)
}
}
const styles = {
body:{
flex:1,
}
}
export default Nav
在这里面我们看到，更加简单的一个route对象，只需要title ／ component两个，title就会先是在顶部导航栏上，component就是需要渲染出来的页面。而login里面我们基本可以不改任何东西就可以让它继续用了，如果你向页面2也有title的话，就去改一下login的跳转时候生成的route的参数。如果你还有更多哦props要传递过去的话，navigatorIOS的passProps会是一个不错的选择。应该这个很简单，所以就不多说了。
小结：
Navigator在使用的概念上，让前端工程师比较容易接纳。每个页面封装成一个组件，然后通过生成route来跳转。RN上比较难接受的就是大量使用了ES6语法和JSX特有的一些东西。第一次使用还是觉得有点困难的。不过慢慢就好了。
额外的课程
本来应该在上面的小结结束这篇文章，不过很多人问起，写惯JS的，喜欢用console.log去输入一些变量和对象看看里面有什么东西。那么在RN上，能否这样呢？
这个当然是可以的啦！做为一个前端，不用console.log还得了？其实操作很简单。
- 首先在你的模拟器里面的Hardware - Shake Gesture这时候出在模拟器里面弹出一个选项：Debug in Chrome
- 打开chrome,进入：http://localhost:8081/debugger-ui
- 打开chrome的开发者工具，看着控制器，回到代码里面找个位置写个console.log('dsad')。写到JSX里面要记得加{}。
- 这时候chrome是不是输出了刚才你写的东西
