react-native里面用于导航的最【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。知名的库就是react-navigati【作者：唐霜】本文作者：唐霜，转载请注明出处。on，它非常优雅的把native界面间的【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net切换抽象为几种形式，并且采用配置来解决r【作者：唐霜】著作权归作者所有，禁止商业用途转载。eact-native自带导航组件使用复【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net杂的问题。本文并不详细去介绍react-【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netnavigation这个组件的使用方法，转载请注明出处：www.tangshuang.net【作者：唐霜】建议你先阅读它的官方文档，并且体验一下它原创内容，盗版必究。原创内容，盗版必究。的examples之后，再来阅读本文。本【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】文主要是用以梳理react-naviga【未经授权禁止转载】未经授权，禁止复制转载。tion导航的设计思维，以及给出一些实际【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net开发中，如何安排几种不同形式的导航的组合【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。策略。

【本文受版权保护】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

导航的本质著作权归作者所有，禁止商业用途转载。

【作者：唐霜】原创内容，盗版必究。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】

和web界面不同，web界面直接通过ur本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】l确定界面，通过<a>标签实未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net现界面之间的切换。即使在SPA时代，也是【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。通过比较轻松的router组件实现界面切【关注微信公众号：wwwtangshuangnet】【转载请注明来源】换。但是native里面，特别是reac本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nett-native开发里面，界面切换需要n【本文受版权保护】著作权归作者所有，禁止商业用途转载。ative层面手动实现，因此，一定需要有本文作者：唐霜，转载请注明出处。【转载请注明来源】人站出来，把界面切换抽象为普适性的一种规本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】则。react-navigation的基【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】本思想，就是一个react-native【版权所有，侵权必究】【作者：唐霜】 app的所有界面（screen）都是素转载请注明出处：www.tangshuang.net原创内容，盗版必究。材，通过navigation这个导航器进【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。行编制，让他们可以自由切换。

【版权所有，侵权必究】【本文受版权保护】本文作者：唐霜，转载请注明出处。

react-navigation的本质，【作者：唐霜】【作者：唐霜】就是建立一个路由网络的索引，并且在建立的【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。时候，就规定好每一个索引节点的表现形式。未经授权，禁止复制转载。原创内容，盗版必究。而界面（screen）只是这些节点下面的著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。素材，一个screen可以被引用到不同的【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】节点下面，再加上节点上的配置信息，就可以本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】产生不同的导航效果。而这个节点的全部信息【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net加起来，就是一个navigation，而著作权归作者所有，禁止商业用途转载。【作者：唐霜】一组同一层面的navigation又可以【作者：唐霜】未经授权，禁止复制转载。放在一起，再附加一些配置信息，这些配置信【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。息可能对所有的navigation都有效【作者：唐霜】【版权所有】唐霜 www.tangshuang.net，那么这些navigation的集合就被【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】称为一个navigator。naviga【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】tor有不同层面的，也就是说，一个nav【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】igator里面，可以把另外一个navi【本文受版权保护】未经授权，禁止复制转载。gator作为一个navigationS本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】etNode（特殊节点）。这样，所有被引未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。用到的screen都被管理在react-著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。navigation建立的作用域下，这样【转载请注明来源】【版权所有，侵权必究】，只要知道节点的名称，就可以立即导航到这【版权所有，侵权必究】【本文受版权保护】个界面。

【本文首发于唐霜的博客】【本文受版权保护】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

四种导航形式【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

react-navigation里面有四未经授权，禁止复制转载。【转载请注明来源】种导航形式，分别是：stack navi【转载请注明来源】【原创不易，请尊重版权】gator、tab navigator、【版权所有，侵权必究】【本文受版权保护】drawer navigator、ful【关注微信公众号：wwwtangshuangnet】【转载请注明来源】l-screen modal。下面一一简【关注微信公众号：wwwtangshuangnet】【本文受版权保护】单阐述一下，不作深入的解释。

【原创内容，转载请注明出处】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

Stack Navigator（栈导航）

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【原创不易，请尊重版权】

栈的特点就是“先进后出，后进先出”，就是【作者：唐霜】著作权归作者所有，禁止商业用途转载。有顺序的堆叠态。因此，在stack na【关注微信公众号：wwwtangshuangnet】【本文受版权保护】vigator里的所有节点都是按照线性排【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。列的，于是就有go back这样的操作。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。除了stack navigator，其他原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。形式都没有go back操作（modal【转载请注明来源】转载请注明出处：www.tangshuang.net有close操作），因为没有stack。

【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】未经授权，禁止复制转载。

stack navigator的另外一个【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】特点，就是它可以有header bar以转载请注明出处：www.tangshuang.net【未经授权禁止转载】及header bar里面的go bac转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】k button。这个特点其他形式也没有【原创内容，转载请注明出处】【作者：唐霜】，特别是tab navigator和dr【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。awer navigator，这点在开发【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net中要非常注意。modal我们后面会细说。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net对于一个stack navigator而本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】言，它的header title只会在一本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】个navigation创建的时候形成，一【原创不易，请尊重版权】未经授权，禁止复制转载。旦形成，就不会更改，这点算是坑，如果你在著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】一个stack里面，把两个screen设著作权归作者所有，禁止商业用途转载。【转载请注明来源】置为同一个组件，又没有设置特定的head【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.neterTitle属性，你会发现，这两个sc【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】reen虽然属于不同navigation【作者：唐霜】著作权归作者所有，禁止商业用途转载。，但是title却是一样的。

【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

Tab Navigator（选项卡导航）

【未经授权禁止转载】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

也就是我们常见的底部菜单那种形式。它几乎原创内容，盗版必究。本文作者：唐霜，转载请注明出处。没有什么特点，唯一的特点（也是缺点）是没【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。有header bar，这点要注意。也正【转载请注明来源】原创内容，盗版必究。因如此，一般一个app的顶层导航，不会使【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】用tab navigator，除非它超级【本文首发于唐霜的博客】未经授权，禁止复制转载。简单，除了这几个tab没有其他页面。也正【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。因如此，我们一般会在它的里面使用stac原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。k navigator作为子节点，这样才【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。能既有tab bar，又有header 【原创内容，转载请注明出处】未经授权，禁止复制转载。bar，还能保证每个tab的header【作者：唐霜】转载请注明出处：www.tangshuang.net title不一样。

转载请注明出处：www.tangshuang.net【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

Drawer Navigator（抽屉导【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net航）

【本文首发于唐霜的博客】【作者：唐霜】【原创内容，转载请注明出处】【版权所有，侵权必究】转载请注明出处：www.tangshuang.net

常见的左侧导航，点击一个按钮从左侧飞出来【版权所有】唐霜 www.tangshuang.net【作者：唐霜】，点一下又收起来关闭。它在很多方面很像t【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netab navigator，只是不在界面上【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net占用视觉空间而已。

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

Full-screen Modal（全屏【未经授权禁止转载】【未经授权禁止转载】弹出层）

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】

一定要加上“full-screen”，是著作权归作者所有，禁止商业用途转载。【本文受版权保护】因为这种modal和那种仅在一个小范围内【作者：唐霜】转载请注明出处：www.tangshuang.net遮罩展示的modal不同，这种modal未经授权，禁止复制转载。未经授权，禁止复制转载。的本质是一个navigation，而且这【未经授权禁止转载】未经授权，禁止复制转载。个navigation总是处于一个sta【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ck的最顶层，你不能再在这个stack的【版权所有，侵权必究】【本文首发于唐霜的博客】顶上加新层，你必须先关闭modal之后，本文版权归作者所有，未经授权不得转载。【本文受版权保护】才可以再在这个stack上加新层。说白了【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，full-screen modal其实【本文受版权保护】著作权归作者所有，禁止商业用途转载。是穿着modal外衣的screen。

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【未经授权禁止转载】

在使用时，你需要咋navigator o原创内容，盗版必究。【本文受版权保护】ptions里面传入：

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

mode: 'modal',  // 启用modal模式，这样，所有的navigator将会从屏幕下方出现
headerMode: 'none', // 隐藏modal的header，因为如果你使用header，会和stack里面的header同时出现（2个header的高度）

它有如下几个特点：【访问 www.tangshuang.net 获取更多精彩内容】

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

• 处于某个stack的最顶层本文作者：唐霜，转载请注明出处。
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】
• 打开方式（进入效果）不同【本文首发于唐霜的博客】
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。
• 当在modal内部导航到stack内的另原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】外层时，它自己会先被关闭
【本文首发于唐霜的博客】【本文受版权保护】【转载请注明来源】
• 写代码时，它一定和一个stackNavi【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netgatorSetNode放在一起，置于一著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。个stack navigator中（当然本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，这个navigator允许有其他的mo【版权所有，侵权必究】转载请注明出处：www.tangshuang.netdal）
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

这里打一个比方，你现在手上有一副扑克牌，原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。你把大小王拿出来，它们就是full-sc【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】reen modal，你把它们放在其他牌未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。的外面区分开。现在开始游戏：你将除大小王转载请注明出处：www.tangshuang.net【转载请注明来源】之外的其他所有牌拿在手中，洗牌，牌盒就是【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】一个stack，你一次只能放入一张手牌，【关注微信公众号：wwwtangshuangnet】【作者：唐霜】放入的牌是随机的，每次放入的必须置于已经【版权所有，侵权必究】未经授权，禁止复制转载。放入的牌的最顶端，想要从牌盒内拿回牌，只著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。能拿取最顶上一张；当你使用大小王替代手牌原创内容，盗版必究。原创内容，盗版必究。放入的时候，你不能继续在王牌上放其他牌（【转载请注明来源】【作者：唐霜】包括另外一张王牌）；如果你想继续游戏，就【原创不易，请尊重版权】【原创不易，请尊重版权】必须将已经放入的王牌拿出，弃于王牌堆内，【原创内容，转载请注明出处】【版权所有，侵权必究】使牌盒内恢复普通牌堆形式。

【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

导航策略【版权所有，侵权必究】

【原创不易，请尊重版权】【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】

虽然这种抽象挺有意思，也符合理论上的逻辑转载请注明出处：www.tangshuang.net【版权所有，侵权必究】。但是实际开发中，我们总会遇到这样那样的著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】坑，那么怎样才能保证在开发时，不至于乱用转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。而达不到自己想要的效果呢？

【未经授权禁止转载】原创内容，盗版必究。未经授权，禁止复制转载。【版权所有，侵权必究】【转载请注明来源】

我们要遵循以下策略：【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】【转载请注明来源】著作权归作者所有，禁止商业用途转载。

• 仅在作为screen的组件中使用this【关注微信公众号：wwwtangshuangnet】【转载请注明来源】.props.navigation，它们本文版权归作者所有，未经授权不得转载。【作者：唐霜】的子组件里面不能使用，因此，将这些被re【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。act-navigation直接使用的组未经授权，禁止复制转载。【原创内容，转载请注明出处】件命名为xxx.screen.js
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】
• 将app最顶层的导航设定为mode: &未经授权，禁止复制转载。【本文首发于唐霜的博客】#8216;modal’，并著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。且将所有的modal都放在这一层
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。
• 业务流放在stack navigator
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
• stack navigator作为tab本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。/drawer navigator的子节著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。点，通过stack里面的screen组件未经授权，禁止复制转载。未经授权，禁止复制转载。navigationOptions配置h【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.neteader title和是否显示tabb未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ar
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。
• 将tab/drawer navigato【版权所有，侵权必究】【转载请注明来源】r作为stack navigator的子本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】节点，和modal放在一个层面
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【作者：唐霜】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

学会导航嵌套是必须的，只有通过嵌套，才能本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net正确处理不同界面的显示问题。但是嵌套又会【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。带来导航界面切换不清晰问题，当你在一个比本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。较深的tab里面，怎么切换到另外一个ta【转载请注明来源】本文作者：唐霜，转载请注明出处。b的比较深的界面呢？其实你只需要直接使用【本文首发于唐霜的博客】【转载请注明来源】navigate方法即可，因为在reac【未经授权禁止转载】本文作者：唐霜，转载请注明出处。t-navigation内部维护了一个m【本文受版权保护】【关注微信公众号：wwwtangshuangnet】ap关系，它保证整个navigation著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。网络的每一个节点只有一个名字，即使你再深未经授权，禁止复制转载。【转载请注明来源】，我都能瞬间定位你。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】

2018-06-11 8910 react-native