react-native navigator

在andoid 我们知道，若想要跳转到某一页面我们可以通过intent 来实现，但在react-native中我们就要抛开原有的一切知识来学了，因为它是通过navigtor 来实现的，那么首先我们来看看官网给我们带来的例子吧

此处给了我们一个navigtor最简单的使用方法，

一般我们在初始化一个navigtor对象时，我们需要给它初始化两个参数值，一个是initialRoute，另一个是renderScene

initialRoute：类似语类的初始化，你需要给他传递参数，来传递给相应的renderScence

renderScene:顾名思义，就是渲染的场景，组件，会接收两个参数，一个是route，另一个是navigtor，其中route传过来的就是initialRoute里面的title和index

那么我们一般怎么使用它呢？

一般我们在渲染组件的时候，会把这些组件单独放进一个路由里，这样做的好处是我们可以对这些组件进行统一的管理

如下是一个路由的代码：

'use strict';import React from 'react';/** * 所有 component 整个框架内只有此处引入 * navigator 统一进行路由显示 * 将全部 component 的引用从老式的层级式改为统一入口的扁平式 */import Homepage from './View/Homepage';import Detailmessage from './View/DetailMessage';/* * 路由配置项 * 可配置默认参数 props: params ，配合 this.props 的限制可使代码更严谨 * component 默认和 key 、component 文件夹名称一致，首字母大写，component 文件夹内强制 index.js 为入口文件 */const RouteMap = {    'homepage': {index: 0, component: Homepage, params: {}},    'detailmessage': {index: 1, component: Detailmessage, params: {}}};export default class Route {    /**     * 获取 ID 对应的 Component     * @param {any} id 页面的 ID     *              有严格的映射关系，会根据传入 ID 同名的文件夹去取路由对应的页面     * @param {any} params Component 用到的参数     */    static getRoutePage (route, navigator) {        let id = route.id,            params = route.params,            routeObj = RouteMap[id],            Component;        if (routeObj) {            Component = routeObj.component;            //合并默认参数            Object.assign(params, routeObj.params);        } else {            Component = Error;            params = {message: '当前页面没有找到：' + id};        }        return <Component  navigator={navigator} {...params} />;    }}

在这个代码区域我们可以清晰的看到我们的那些组件会被显示出来，还有主页面的代码

<Navigator          style={{paddingTop:55,backgroundColor:'#FFFFFF'}}initialRoute={{                id: 'homepage',                params: {}            }}          ref={(navigator) => { !this.state.navigator ? this.setNavigator(navigator) : null }}navigationBar={<Toolbar onIconPress={drawer.openDrawer} />}configureScene={this.configureScene}renderScene={this._renderRoute.bind(this)}/>        }

虽然navigtor为我们提供了很多的方法来跳转页面，但最常用的还是，navigtor.push和navigtor.popup.

我们来看一下homepage的跳转方式

import React, { Component } from 'react';import {  Text,  View,  PropTypes,  TouchableHighlight} from 'react-native';import CarView from './../Component/CarView'export default class Homepage extends Component {    constructor(props){        super(props);    }    _onPressButton(){        this.props.navigator.push({            id: 'detailmessage',            params: {                            }        });           }    render(){        return(        <View>            <TouchableHighlight onPress={this._onPressButton.bind(this)}>                <View>                    <CarView/>                </View>            </TouchableHighlight>        </View>        )    }}

这里我们可以清楚的知道他有一个方法可用于点击跳转，对了，还有一件重要的事情，就是在configureSence里面要注意，如果想取消页面点击跳到另一页面，使页面不能左滑返回回上一页面就必须在configureSence中将这样配置：

 configureScene(route, routeStack) {      var conf = Navigator.SceneConfigs.HorizontalSwipeJump;      conf.gestures = null;      // if (route.type == 'Modal') {      //   return Navigator.SceneConfigs.FloatFromBottom;      // }      // return Navigator.SceneConfigs.PushFromRight;       return conf;  }

navigtor的用法暂且就讲解那么多：

点击