React-Native 分享二之React-Navigation

咱们使用的是3.x版本,须要作以下操做

一.引入react-navigation

yarn add react-navigation
复制代码

如图,咱们发现有不少warn,报的是一些依赖没知足,通常咱们说程序员不看warn,确定就直接运行了.

可是做为过来人,告诉你确定会报错,缺乏这个warn当中的一个库react-native-gesture-handler因此也别走弯路,把这些库都给加上

#这是一个手势库
yarn add react-native-gesture-handler
#我也不知道用来干吗的库,大概是一些屏幕设计吧,这是它的github:https://github.com/browniefed/react-native-screens
yarn add react-native-screens

#react-native-gesture-handler又依赖以下库
yarn add react-art
yarn add react-dom
yarn add react-native-web
复制代码

全都装完之后,link一下项目

react-native link
复制代码

这里注意了,在0.59中已经提到,不建议这样作,后续会移除这个命令,必须带上包名link才行

友情提示一下:三方库带原生的须要link,不带原生的不必link

#xxxx为三方库名字
react-native link xxxx
复制代码

运行一下项目,能够正常运行,说明没有link错误,接下来咱们分享一下这个三方库的基本使用

二.使用

经常使用的有三个API

API名	描述
createAppContainer	确定会用到,这是对外暴露的顶级出口
createStackNavigator	建立正常页面的navigation
createBottomTabNavigator	建立带tabbar的navigation
createSwitchNavigator	用于路由切割

先说咱们的目的:建立一个登陆页和两个业务的带tab的基础页面 效果以下

接下来在构建这样一个基础页面的过程当中我逐步讲解

1.建立一个包含两个页面的基础路由

如图,咱们建立了一个基础的路由,包含两个view,并将其做为参数,导出了一个用createAppContainer包裹的App,咱们运行看一下效果

能够看到两个页面间的跳转

2.建立带tab的路由

咱们须要建立一个带tab的路由,并把homeView和MyView放到这个tab里面

这里要声明一下,带tab的路由,有不少种建立方式,我这里写两种,一种是我推荐的,一种是react-navigation团队推荐的(可是我不推荐).

react-navigation推荐的方式(我找不到推荐的git地址了)

直接上代码

如图,咱们分了3个路由栈,路由栈1,2和tab栈

tab栈里面包含了12,其余全部页面须要写到1和2中 如图中,我在路由栈1和路由栈2中分别新增了1个页面H1和My1.

咱们运行一下项目

能够发现以下问题:

• 1.二级页面仍然有底下的tabbar

从上述的gif能够看到,当我从一级页面HomeView跳转到二级页面H1,在H1的页面中,tabbar还存在.固然,这个问题是能够解决的.而且官网也提供了解决方案

• 2.路由层级"混乱",可能会引起非预期的后果

如gif,能够发现,咱们从MyView跳转到H1,可是H1的返回倒是返回到HomeView,可能会和咱们的预期不一样.

固然也是能够解决的,只须要将H1也放到路由栈2中便可.但这意味着可能一个页面你须要注册好几回路由栈,凭空添加了一些维护成本

我推荐的方式

第一次改写代码如图

效果以下

咱们会发现,有首页有两个navigation头,这是为何呢?

回到上一个截图,咱们能够看到,路由层级关系是

咱们能够看到,root包含一个header,里面的路由栈1也包含一个header.

所以咱们只须要去掉一个header便可,这里咱们去掉root顶级的header,缘由是tab中两个页面都是共享root的一个header,在视觉上这是不正确的

最终代码以下(没变的部分我就折叠起来了,否则一张图截不下):

咱们再运行一下,效果以下

3.建立包含login页面的路由栈

建立一个新的js文件放此路由栈,如图

4.路由导出

因为最终要导出了,咱们对前面的路由栈也作了一些小改动

包含tab的路由栈

包含导航的路由栈没有变化

建立作一个新的js文件导出最终的路由栈,如图

咱们能够看到,咱们使用createSwitchNavigator这个API切割了两个路由栈,且第二个参数配置项中默认路由是AppLogin,这样默认就进入首页这个路由栈

咱们再使用createAppContainer将createSwitchNavigator包裹,获得最终的一个顶级路由,注意createAppContainer方法最终获得的是一个Commponent,能够直接当作组件应用

这时候,你直接导出AppTopNav是能够正常使用的

至于为何我要额外作一个组件,请继续日后看4.构建不带props的API路由

最终效果:

3.常见使用方式

例以下面的Login页面,因为login自己页面是被createStackNavigator包裹的,navigation这个对象已经经过props传递了,使用如图

this.props.navigation.navigate("注册的页面名称","传递参数对象,可选项")
复制代码

4.构建不带props的API路由层

咱们常常会有各类"切面"需求,举个例子:

不管当前在哪一个页面,只要发现你的登陆状态过时,当即跳回到登陆页.

在代码层面看,你接受到"登陆状态过时"这个信号的时候,你百分之八十的可能性是不在UI层的,可能在网络层其余层面,这时候你就会发现没有navigation给你用,就很难受.
复制代码

所以,咱们须要构建一个存储顶级路由,只暴露API方法的路由层

咱们能够新建一个js以下图

设置好了set方法和跳转方法,接下来就是怎么set顶级路由进去,回答咱们👆的问题

咱们能够在这里经过ref的方式获取这个顶级路由,并用于后续跳转

使用起来只须要:

NavigationService.navigate("注册的页面名称","传递参数对象,可选项")
复制代码

路由构造搭建到此完毕