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("註冊的頁面名稱","傳遞參數對象,可選項")
複製代碼

路由構造搭建到此完畢