前言

react-navigation虽然一直在用，但始终没有将官网(英文版)给过一遍，最近要搭建一个新项目，对于导航嵌套有一定的要求，就借此机会将文档详细过了一下。阅读过程中发现很多想要的功能人家本身就支持，因为之前没有认真看文档，自己又造了一遍轮子而且还留下一些坑。借此机会将所有文档给梳理一下

1. 名词解释

1. navigator
   导航器，比如：StackNavigator/TabNavigator/DrawerNavigator
2. screen
   在导航器中配置的真正显示在屏幕上的组件，只有这类组件的props上才有navigation对象
3. navigation
   导航对象，我们通过他进行屏幕的跳转
4. route
   路由对象，包含着该页面的key、name及路由参数
5. state
   路由栈

2. 各种导航API

主要分如下几类：

1. DrawerActionHelpers
   

2. TabActionHelpers
   

3. StackActionHelpers
   

4. NavigationHelpersCommon
   

5. EventConsumer
   

6. NavigationProp

下面说几个我感觉需要需要记录的

1. navigate、push
   navigation.navigate('RouteName')，如果指定路由在路由栈中存在，会回到该页面，否则会push到一个新页面；navigation.push('RouteName')，无论指定路由是否在路由栈中，都会新建一个路由页面并跳转过去。

   疑问： A push B，B push C，C push D，D navigate A后，路由栈中还会存在BCD么

   不会存在，经测试，navigate到哪个已存在的页面，该页面之后的路由都会被清空。下面附上两个case的结果
   D navigate A后，路由栈中只剩A；D navigate B后，路由栈中只剩A、B

2. setParams
   上个页面传过来的路由参数要做修改，直接通过setParams更改即可，不用再次新建一个state处理

   疑问：setParams会触发render么

   会，我将parmas的属性做为文本内容，点击按钮setParams后，文本内容更新

3. setOptions
   可以使用该API直接更新标题，另外当导航想要配置自定义的button组件时，也可以通过setOptions配置

4. getParent
   获取父导航，比如A页面是直接嵌套在Stack导航下，Stack是嵌套在Drawer下，在A页面是无法直接使用navigation.openDrawer()打开导航，需要先获取父导航navigation.getParent().openDrawer()

5. dispatch
   导航操作可以通过dispatch分发对应的action实现，比如：navigation.dispatch(DrawerActions.openDrawer)

3. 生命周期

官方原文

1. useFocusEffect
   页面显示时调用，传递的回调应该包裹在 React.useCallback 中，以避免过于频繁地调用

   import { useFocusEffect } from '@react-navigation/native';function Profile() {useFocusEffect(React.useCallback(() => {// Do something when the screen is focusedreturn () => {// Do something when the screen is unfocused// Useful for cleanup functions};}, []));return <ProfileContent />;
   }
   

2. useIsFocused，当前页面是否处于焦点状态
   如果您使用的是选项卡或抽屉式导航器，因为导航器中的所有屏幕可能会同时渲染并保持渲染 - 这意味着StatusBar您设置的最后一个配置将被使用（可能在最后一个选项卡上您的标签导航器，而不是用户所看到的。为了解决这个问题，我们必须让状态栏组件知道屏幕焦点，并仅在屏幕获得焦点时渲染它。我们可以通过使用useIsFocused钩子并创建一个包装器组件来实现这一点：

   import * as React from 'react';
   import { StatusBar } from 'react-native';
   import { useIsFocused } from '@react-navigation/native';function FocusAwareStatusBar(props) {const isFocused = useIsFocused();return isFocused ? <StatusBar {...props} /> : null;
   }
   

3. 疑问：在该页面的子组件是否可以使用这两个API
   可以，将这两个API放到子组件里，可以得到正确的结果

4. 疑问：有useBlurEffet么
   找了，没有，如果想要使用，使用使用如下订阅的方式

   const unsubscribe = navigation.addListener('blur', () => {// Screen was focused// Do something
   });
   

   另外官方提供的页面生命周期只有focus和blur

4. 身份验证

官方原文

这里介绍的这种方案更适用于没有访客模式的那种App，在此我学到了两个小知识点：

1. 路由注册是可以动态切换的，说不定以后碰到啥奇怪的业务场景就用上了
2. 可以将一些配置相同的路由放到一个路由group中，在group上统一配置

通过这种案例，我了解到

5. 安全区域

官方原文

1. 内部使用的是react-native-safe-area-context来处理的安全区域，其他的方式要么有问题，要么已经过时
2. 可以通过SafeAreaView的edges属性控制哪边自动填充被盖住的区域，比如：当前页面没有导航，我又不想让安全区域顶到到屏幕的最上方，就可以将该属性设置为['top']，
3. 使用useSafeAreaInsets钩子能够得到安全区域的偏移量，然后做你想做的事情

6. 状态栏

官方原文

之所以要判断当前页面是否是焦点，是因为若项目中有选项卡或抽屉，可能会同时渲染，造成一些莫名的异常

import * as React from 'react';
import { StatusBar } from 'react-native';
import { useIsFocused } from '@react-navigation/native';function FocusAwareStatusBar(props) {const isFocused = useIsFocused();return isFocused ? <StatusBar {...props} /> : null;
}

7. 多个抽屉

官方原文

在抽屉路由中，控制抽屉方向的drawerPosition属性不可动态更改，因此若项目中既有左抽屉又有右抽屉，就需要嵌套两个抽屉实现，在这里也用到了一个getParent的API来获取两个抽屉路由的导航实例进而控制在哪边显示抽屉

8. 嵌套导航的options该如何配置

官方原文

首先摆上官方加粗的一句话：

不管是单个导航还是嵌套导航，修改父导航的options只能在该导航下的screen component中通过navigation.setOptions进行修改，

我理解的是：A嵌套B，B嵌套C，无法在C中修改A的options

9. 返回上一级时的二次确认

官方原文

可以用两种方式来实现：

1. BackHandler监听
2. beforeRemove事件，其中提到的preventDefault在iOS上无效

在没有beforeRemove之前，要实现这种效果基本就是如下几种方式：

1. 重新header的返回按钮
2. 禁用滑动返回手势
3. 重写Android的系统返回事件

这个新增的API除了代码量更少外，还有以下几个特色：

1. 他不跟任何的特定按钮绑定，自定义的返回按钮也可触发
2. 他不跟任何的特定action绑定，任何从state中移除route的操作都可触发，比如：pop/reset/swipe 等
3. 支持嵌套导航，比如：由父路由发送的action导致的移除route也会触发该监听
4. 用户仍然可以滑动返回，但如果监听事件里做了prevented处理，该侧滑操作将会被取消
5. 在监听事件里可以通过navigation.dispatch(e.data.action) 继续最初确定的路由回退操作

虽然很强大，但也有一些限制：

1. 当用户由于不受导航状态控制的操作而退出屏幕时，不会触发该监听，比如：

   • 退出退出App、退出浏览器
   • 由于预期或非预期的原因，造成screen被卸载

2. 在@react-navigation/native-stack中，如下两个操作该监听会失效：

   1. 侧滑返回
   2. 点击自带的返回按钮

   解决方案也简单，对于前者只能禁用侧滑返回，对于后者自定义返回按钮就行

10. 获取到navigation实例的三种方式

hook获取
ref获取

1. 从props中取
2. 从useNavigation中取(本质上是通过context获取到了screen component上的navigation)
3. 获取createNavigationContainerRef

前两者都是在组件内获取在组件内使用，但当我要在非组件内实现路由跳转(比如：redux中)，就要使用第三种方式，这种方式跟前两者相比有如下缺陷：
4. 针对screen component的一些特定API，ref不支持，比如：setOption/push…
5. 路由跳转的灵敏度和用户体验有所降低

因此对于第三种方式，应该尽可能的避免使用，除非迫不得已

11. Deep linking与react-navigation的融合

Linking的主要作用是通过访问指定连接来启动App，在项目中，我们可以获取链接上的参数，通过参数来判定跳转到哪个页面。导航库官方推荐使用官方提供的融合方案，强烈不建议自行手动将两者结合，主要是因为官方的方案针对一些边缘case都做了处理，若自行手动处理会比较麻烦。官方也详细介绍了基础配置及各种项目下如何测试，具体看deep-linking

基础介绍和基础配置搞完了，官方也专门提供了一个文档说明里面的各种case如何配置，详细看configuring-links，我下面讲我认为比较重点的内容标记一下：

1. 在config中配置路由和path的映射关系时，嵌套关系要和实际路由嵌套一致
2. 配置path的方式有多种，不同场景对应的path有些差异，大家根据实际需求做选择
3. 在config中，可通过parse对参数进行自定义处理，还提到一个stringify参数，没有搞明白他是要干嘛，经测试他也没有执行
4. 若在config中不配置initialRouteName，通过Link冷启动App，无法返回上一级，另外在此场景下，url中无法给初始路由设置参数，返回的页面必须无参数据，或者通过screen的initialParams给设置初始参数
5. 官方本质上是将url转化成state，然后使用dispatch做分发实现的路由跳转，为了为了增强扩展性，官方将getStateFromPath和getPathFromState开放给开发者，让开发者能够做更高阶的事情

在web上的一些注意点：：

1. 配置link前在web上的跳转不会改变url，配置link后会将路径和参数拼到url后

   1. 路径默认是按照路由嵌套的顺序展示(若嵌套过深，路径过长，官方提供有简化方案)
   2. 参数默认是按照query的格式拼接，若在path中有指定拼接方式，跳转时会按照指定格式处理

12. 对web的支持

原文

对web的支持还是比较友好的，无论从文档上还是从实际使用上，都还没有发现有啥需要特别处理的。

13. 路由跳转监听

原文

可以在这里做些页面的埋点操作

14. 主题切换及自定义

原文

还挺完善的

15. state持久化

我们在调试深层级页面时，有时一旦reload，还得再次一层一层点进去，这里做的事情就是实时将路由栈在本地维护一份，reload后从本地取出，恢复路由栈

16. ts类型

本质上主要解决两个问题：

1. 路径和对应的参数提示
2. 各种navigator上的API提示

官方针对导航嵌套的场景也帮助我们做了示例，若这里配置齐全，在配置Linking时会比较方便

17. 其他的一些API

1. getFocusedRouteNameFromRoute
   获取到某个嵌套导航器下获取到焦点的路由名称，使用场景：要求tab的标题跟其下页面的路由名称有关

18. 导航嵌套

上诉都看完后，或多或少对导航嵌套这一块应该都不陌生了。接下来我提供几种嵌套导航Demo，并列出相关特性，大家可根据业务情况做抉择，或者扩展出更适合自己业务的导航嵌套模式。

不知不觉，本篇幅已快七千，又因为这块整体比较独立，我就单开一篇文章，react-navigation的各种导航嵌套优劣势

19. API介绍

在上面的介绍中，已经接触了一些API，但始终缺乏对这些API的系统化认识，我再过一遍的目的，主要想让自己做下查漏补缺，该内容整体比较独立，也单开一个文章，react-navigation的API梳理

20. 自定义导航

官方原文
我之所以提到，是想说明该库支持自定义导航，用到的时候再详细研究吧

21. 可替换的导航库

官方原文

1. react-native-router-flux: 基于react-navigation，但提供了一些不同的API
2. react-native-navigation：在iOS和Android上使用底层本地API，类似于createNativeStackNavigator。这是React Navigation的一个流行替代方案，如果您试图将React Native集成到现有的大型本地应用程序中，它可能更适合您。

react-navigation v6 中文极速版相关推荐

1. Internet Download Manager v6.41.3中文特别版IDM下载器免费下载

   Internet Download Manager v6.41.3中文特别版(IDM),全球最佳下载利器.Internet Download Manager 是一款Windows 平台功能强大的多线程 ...

2. Mate Translate for Mac(翻译软件) V6.0.0中文破解版

   今天为大家介绍的是一款超强的翻译软件Mate Translate Mac,帮你翻译超过100种语言的单词和短语,使用文本到语音转换,并浏览历史上已经完成的翻译,你还可以使用Control + S在弹出 ...

3. PDF转WORD的工具——Solid Converter PDF V6.0 中文破解版

   PDF转WORD的工具--Solid Converter PDF V6.0 中文破解版 Solid Converter PDF是一个完成从PDF格式到Word格式.doc的格式转换的工具,并完全支持中 ...

4. RN路由-React Navigation组件5.x-基本原理(中文文档)

   ##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...

5. android 内核老版本下载安装,百度极速版老版本下载安装

   百度极速版老版本是一款非常好用的手机搜索软件,不仅搜索引擎极其强大,而且用户还可以分各种类别来搜索自己想要看到的内容,有句话是叫不知道问度娘,正是因为百度的搜索引擎十分的强大,万事皆可在百度上进行搜索 ...

6. Magento支付宝手机网站支付插件V6.0旗舰版发布，支持在微信中使用支付宝支付，订单重新支付功能！...

   2019独角兽企业重金招聘Python工程师标准>>> 功能 严格按照支付宝接口文档编写代码. 支付宝异步通知机制,确保订单状态及时更新,无丢失遗漏. 订单完美对接:支付后即使关掉支 ...

7. Aria2 GUI for Mac V1.3 极速版 百度网盘高速下载神器

   Aria2 GUI for Mac V1.3 极速版 百度网盘高速下载神器 网盘下载:链接:https://share.weiyun.com/5zWjj8J 密码:zjbyns 软件大小:5.56M ...

8. iStat Menus 6 for Mac中文破解版激活方法无需激活码

   iStat Menus 6 Mac 中文破解版是Mac OS平台上十分优秀的一款系统与硬件监控软件,通过istat menus for mac 我们可以实时掌握自己的Mac电脑情况,可以查看硬件温度. ...

9. DAEMON Tools for mac 虚拟光驱 中文破解版下载

   DAEMON Tools for mac 是一款 mac 上的虚拟光驱软件,这款 DAEMON Tools for mac 不仅可以进行映像制作,还能加载近乎所有格式的镜像文件,包括.VHD..FLA ...

10. EagleGet下载|EagleGet(猎鹰高速下载器) v2.1.5.10免费中文便携版下载

    点击下载来源:EagleGet下载|EagleGet(猎鹰高速下载器) v2.1.5.10免费中文便携版下载 EagleGet,也称猎鹰高速下载器,它是国外的一款免费下载工具.我们使用它,可以进行各种 ...

最新文章

1. Nacos-NacosRule负载均衡
2. MFC+OPENCV+显示MAT类型图像
3. LeetCode 326. 3的幂
4. 训练日志 2019.1.13
5. jsp、css中引入外部资源相对路径的问题
6. 总结2---万用表测量方波和正弦波的电压
7. 3850x5服务器装系统,IBM X3850 X5服务器ESXi 5安装配置全过程——安装
8. 综合能源系统及其应用
9. 冰点文库下载器v3.2.9
10. 弹性波波长计算公式_固体中的弹性波
11. rqnoj 2 开心的金明
12. 中职计算机ps公开课教案,全国“xx杯”计算机类说课大赛课件一等奖作品：《利用PS蒙版制作照片的蒙太奇效果》教学设计.doc...
13. 万亿市场的广场舞未来在哪里？
14. php.ini在哪？找不到php.ini,已解决
15. 读微博营销案例-杜蕾斯套鞋事件
16. basler相机的类
17. Golang开发手机应用有两种方式简介
18. windows10卸载程序_如何在Windows 10中卸载或修复程序
19. 掌握python字符串容器_Python字符串容器,python
20. 小白兔笑话全集（转）笑死人不偿命

热门文章

1. 股票交易接口程序概述
2. IP地址中的网络地址和主机地址分别是什么意思？
3. 删除之后在计算机操作中快捷键,计算机中删除的快捷键是什么
4. 【Codeforces思维题】20220728
5. android subscriber 自定义,android – 使用自定义ErrorHandler时,Retrofit不会触发onError
6. c语言中Exec函数,子进程的执行 -- exec 函数
7. 数仓搭建 DWT 层
8. 自适应页界面HTML源码
9. 使用console配置线连接真机路由器
10. 2 创造你的物理世界（1）