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是不是输出了刚才你写的东西