[React Native]导航器Navigator

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

基本使用方式：

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

常见的一个写法：

// ...
import FirstPage from './FirstPage';
class Demo10 extends Component {render() {return (<Navigatorstyle={{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 propertiesbackButtonTitle?: string  // 标题栏左边按钮文字content?: stringmessage?: string;index?: numberonRightButtonPress?: () => 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.js、SecondPage.js和ThirdPage.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

我们打印下FirstPage和SecondPage的生命周期函数componentDidMount和componentWillUnmount。

// 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

[React Native]导航器Navigator相关推荐

React Native的Navigator详解
欢迎Follow我的Github,博客会同步在Github的Blog仓库更新.也可以关注我的CSDN博客的React Native分类 Github地址:LeoMobileDeveloper 前言除 ...
iOS开发者React Native学习路线
2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...
React Native开发之动画(Animations)
博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解另外,我 ...
[react native] navigator过渡卡顿问题
为什么80%的码农都做不了架构师?>>> navigator过渡卡顿问题 ReactNative导航设计与实现 https://segmentfault.com/a/11900 ...
【稀饭】react native 实战系列教程之Navigator实现页面跳转
主界面开发上一节,我们已经完成了首页的开发,现在,我们继续完成主界面的开发,就是添加底部'首页'和'我的'两个tabbar. 在js/文件夹下,新建MainScene.js文件 import Rea ...
React Native——react-navigation的使用
在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...
如何使用React Native构建嵌套的抽屉菜单
by Dhruvdutt Jadhav 由Dhruvdutt Jadhav 如何使用React Native构建嵌套的抽屉菜单 (How to build a nested drawer menu w ...
如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
React Native移动框架功能研究
React Native移动框架功能研究此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...

[React Native]导航器Navigator

[React Native]导航器Navigator相关推荐

最新文章

热门文章