[React Native]导航器Navigator

Posted by zhuhf on July 11, 2016

前言

官方提供了两种导航器:NavigatorNavigatorIOS,后者只能在iOS平台使用,而前者是可以兼容Android和iOS平台的,详细介绍请参考官方介绍

基本使用方式

  • initialRoute:初始化路由,指定第一个页面
  • configureScene:配置页面切换场景
  • renderScene:渲染场景,返回需要显示的页面

常见的一个写法:

// ...
import FirstPage from './FirstPage';
class Demo10 extends Component {
  render() {
	return (
		<Navigator
			style=\{\{flex: 1\}\}
            initialRoute= \{\{id: 'FirstPage', component: FirstPage\}\}
            configureScene= {this.configureScene}
            renderScene= {this.renderScene}
		/>
	);
  }
  configureScene(route, routeStack) {
    if (route.sceneConfig) { // 有设置场景
		return route.sceneConfig;
    }
    return Navigator.SceneConfigs.PushFromRight; // 默认,右侧弹出
  }
  renderScene(route, navigator) {
    return <route.component {...route.passProps} navigator= {navigator}/>;
  }
}
// ...

initialRoute、configureScene、renderScene三个方法都和一个重要的参数route有关联。

route:表示路由对象的信息,我们看下它包含哪些参数

export interface Route {
    component?: React.ComponentClass<ViewProperties> // 必要参数,目标页面
    id?: string  // 通常用来设置一个与component匹配的标识
    title?: string // 常用来设置component页面的标题参数
    passProps?: Object; // 用来传递参数

    //anything else
    [key: string]: any

    //Commonly found properties
    backButtonTitle?: string  // 标题栏左边按钮文字
    content?: string
    message?: string;
    index?: number
    onRightButtonPress?: () => void // 标题栏右边按钮点击事件
    rightButtonTitle?: string // 标题栏右边按钮文字
    sceneConfig?: SceneConfig // 切换场景的参数
    wrapperStyle?: any
}

本篇文章我们会使用到id、component、passProps、sceneConfig这四个参数,其他类似于backButtonTitle、onRightButtonPress等,这些参数在使用通用导航栏的时候会用到。

实际项目中,这种方式基本不会用,因为业务的复杂等原因会导致通用导航栏变得越来越臃肿,不可维护,如果想了解的同学,可以参考这篇文章

Navigator和其他平台的导航一样,也是使用“栈”的形式来维护页面。我们都知道“栈”是先进后出的原则,Navigator多数API是“遵循”这个原则的。

不同的是,Navigator还提供了更加灵活的API,使得我们可以从类似“栈顶”跳转到“栈底”,同时还能保持“栈底”以上的页面存在而不销毁,我觉得可以用“伪栈”来形容它。

常用API

  • push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
  • pop() - 跳转回去并且卸载掉当前场景
  • popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。
  • popToRoute(route) - pop到路由指定的场景,在整个路由栈中,处于指定场景之后的场景将会被卸载。

  • jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
  • jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
  • jumpTo(route) - 跳转到已有的场景并且不卸载。 备注:与push&popxxx效果类似,只是不会卸载场景

  • replace(route) - 用一个新的路由替换掉当前场景
  • replaceAtIndex(route, index) - 替换掉指定序列的路由场景
  • replacePrevious(route) - 替换掉之前的场景 备注:replacexxx:仅仅替换场景,并不会跳转

  • resetTo(route) - 跳转到新的场景,并且重置整个路由栈
  • immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
  • getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。

为了演示以上API的使用,我们新建三个js文件,FirstPage.jsSecondPage.jsThirdPage.js

FirstPage作为导航控制器的根页面,请参考文章开头给出的代码示例。

push&popxxx:

1、FirstPage->push->SecondPage:传递参数from

// FirstPage.js
_push()
{
	this.props.navigator.push({
		id: 'SecondPage',
		component: SecondPage,
		passProps: {
			from: 'First Page'
		},
		sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJump
	});
}

2、SecondPage->push->ThirdPage,代码类似就不贴了。然后,ThirdPage->pop->SecondPage,返回上一个页面

// ThirdPage.js
_pop()
{
	this.props.navigator.pop();
}

3、ThirdPage->popToTop->FirstPage,返回第一个页面

// ThirdPage.js
_popToTop() {
	this.props.navigator.popToTop();
}

4、ThirdPage->popToRoute->FirstPage,返回第一个页面

// ThirdPage.js
_popToRouteById(id) {
	var destRoute;
	this.props.navigator.getCurrentRoutes().map((route, i) => {
		if (route.id === id) {
			destRoute = route;
		}
	});
	// 携带参数
	destRoute.passProps = {from: 'Third Page'};
	this.props.navigator.popToRoute(destRoute);
}

效果图如下: push&popxxx.gif

jumpxxx:

1、SecondPage->jumpBack->FirstPage:返回上一个场景,并且不卸载当前场景

// SecondPage.js
_jumpBack() {
	this.props.navigator.jumpBack();
}

2、FirstPage->jumpForward->SecondPage:与jumpBack配套使用,返回触发jumpBack的场景

// FirstPage.js
_jumpForward()
{
	this.props.navigator.jumpForward();
}

效果图如下:

jumpxxx.gif 我们打印下FirstPageSecondPage的生命周期函数componentDidMountcomponentWillUnmount

// FirstPage.js
componentDidMount() {
	console.log("FirstPage: componentDidMount");
}

componentWillUnmount() {
	console.log("FirstPage: componentWillUnmount");
}

// SecondPage.js
componentDidMount() {
	console.log("SecondPage: componentDidMount");
}

componentWillUnmount() {
	console.log("SecondPage: componentWillUnmount");
}

lifecircle.png 我们看到,在来回的跳转过程中SecondPage并没有被卸载。

更有趣的是,从SecondPage jumpBack之后。在FirstPage页面,如果点击push,你会发现旧的SecondPage会被卸载,然后会创建一个新的SecondPage。console如下:

lifecircle2.png 3、SecondPage->jumpTo->FirstPage:跳转到一个已存在的场景,并且不卸载当前场景

// SecondPage.js
_jumpToById(id) {
	var destRoute;
	this.props.navigator.getCurrentRoutes().map((route, i) => {
		if (route.id === id) {
			destRoute = route;
		}
	});
	// 携带参数
	destRoute.passProps = {from: 'Second Page'};
	this.props.navigator.jumpTo(destRoute);
}

replacexxx:

新建一个场景FourthPage.js。当前“栈”里面的场景为FirstPage->SecondPage->ThirdPage。 1、ThirdPage ->replacePrevious:在ThirdPage页面替换上一个场景(也就是SecondPage)为FourthPage

// ThirdPage.js
_replacePrevious()
{
	this.props.navigator.replacePrevious({
		id: 'FourthPage',
		component: FourthPage,
	});
}

此时,“栈”里面的场景为FirstPage->FourthPage->ThirdPage

2、replace(route)replaceAtIndex(route, index)replacePrevious非常类似,只是替换的场景不同而已,这里不做讲解,大家自己测试一下就知道效果了。

  • replace(route) - 用一个新的路由替换掉当前场景
  • replaceAtIndex(route, index) - 替换掉指定序列的路由场景

需要注意的是,replacexxx:仅仅替换场景,并不会跳转

resetTo:

跳转到新的场景,并且重置整个路由栈。

想象这样一个场景,我们有个App,用户登录之后,可能已经进入三级页面,此时用户希望切换用户重新登录,这时候我们就需要跳转到登录页面,并且清空其他所有页面。

此时,就需要使用到resetTo

我们在ThirdPage->resetTo->FourthPage,然后在FourthPage使用pop,看下是否还有其他页面存在。

// ThirdPage.js
_resetTo()
{
	this.props.navigator.resetTo({
		id: 'FourthPage',
		component: FourthPage,
	});
}
// FourthPage.js
_pop()
{
	this.props.navigator.pop();
}

效果图如下:

resetTo

我们看到整个路由“栈”被重新初始化,FourthPage成为“栈”的根页面。

immediatelyResetRouteStack(routeStack):

用新的路由数组来重置路由栈,与resetTo类似,只不过resetTo参数为一个对象,而immediatelyResetRouteStack(routeStack)为一个数组,感兴趣的同学可以自己尝试一下效果。

本文的源码地址Demo10