在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的用法暂且就讲解那么多:
点击