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为我们提供了很多的方法来@R_871_404@面，但最常用的还是，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的用法暂且就讲解那么多：

点击

react-native navigator

猜你在找的React相关文章