前言

在平時H5或者RN開發時，我們業務場景中大部分都不是單頁面的需求，那這時我們就能使用路由在進行多頁面的切換。下面會對比一下react路由和RN路由的本質區別和使用方法。

路由（routing）是指分組從源到目的地時，決定端到端路徑的網絡范圍的進程

React路由

簡介

使用React構建的單頁面應用，要想實現頁面間的跳轉，首先想到的就是使用路由。在React中，常用的有兩個包可以實現這個需求，那就是react-router和react-router-dom。本文主要針對react-router-dom進行說明

在根組件上配置路由，引用react-router-dom結構{ HashRouter as Router, Route ,Link ,Redirect ,Switch }，HashRouter組件是路由的根組件，定義屬性和方法傳遞給子組件。Router組件進行路由，指定每個路由跳轉到相應的組件。Link組件指定跳轉鏈接。Redirect組件路由重定向，不管什么情況下，都會跳轉當前指定的路徑，和switch組件聯合起來一起調用，當路徑匹配到路由，不在往下匹配

兩類路由

HashRouter：利用監聽hash變化（有一個事件hashchange）實現路由切換，它是路由容器，

渲染子組件，并向下層子組件傳遞（Context上下文傳遞）loaction,history等路由信息

BrowserHistory：利用H5Api實現路由切換，是路由容器，渲染子組件，

并向子組件傳遞loaction,history等路由信息

路由配置

image-20200601110809995

路由實現原理

HashRouter只是一個容器，本身并沒有DOM結構

它渲染的就是它的子組件，并向下層傳遞location

組件掛載完成之后根據hash改變pathname的值，如果沒有hash值就默認展示根組件

需要跳轉路由頁面時我們使用link或者push去賦值hash的pathname 如this.props.history.push({ pathname: preview, param: { pic, index } });

當hash值發生變化的時候會通過hashchange捕獲變化，并給pathname重新賦值

拿到上下文中傳過來的location，然后取出pathname。再對它的子組件進行遍歷，如果子組件的path屬性和當前上下文中傳過來的pathname屬性相匹配就進行渲染，若不匹配就返回null。

總結

React路由是實質就是，根據遍歷識別路由的pathname，來切換router路由容器中component組件的加載渲染。每次更改pathname就都是組件的重新渲染流程，頁面也都會呈現出刷新的效果。

RN路由

簡介

RN把導航和路由都集中到了react-navigation庫里面

組件使用堆棧式的頁面導航來實現各個頁面跳轉

構造函數：StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs：頁面路由配置

StackNavigatorConfig：路由參數配置

路由配置

image-20200601111333107

參數詳解

navigationOptions：配置StackNavigator的一些屬性。

   title：標題，如果設置了這個導航欄和標簽欄的title就會變成一樣的，不推薦使用

   header：可以設置一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設置為null

   headerTitle：設置導航欄標題，推薦

   headerBackTitle：設置跳轉頁面左側返回箭頭后面的文字，默認是上一個頁面的標題。可以自定義，也可以設置為null

   headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭后的文字時，默認改成"返回"

   headerRight：設置導航條右側。可以是按鈕或者其他視圖控件

   headerLeft：設置導航條左側。可以是按鈕或者其他視圖控件

   headerStyle：設置導航條的樣式。背景色，寬高等

   headerTitleStyle：設置導航欄文字樣式

   headerBackTitleStyle：設置導航欄‘返回’文字樣式

   headerTintColor：設置導航欄顏色

   headerPressColorAndroid：安卓獨有的設置顏色紋理，需要安卓版本大于5.0

   gesturesEnabled：是否支持滑動返回手勢，iOS默認支持，安卓默認關閉

screen：對應界面名稱，需要填入import之后的頁面

mode：定義跳轉風格

  card：使用iOS和安卓默認的風格

  modal：iOS獨有的使屏幕從底部畫出。類似iOS的present效果

headerMode：返回上級頁面時動畫效果

  float：iOS默認的效果

  screen：滑動過程中，整個頁面都會返回

  none：無動畫

cardStyle：自定義設置跳轉效果

  transitionConfig： 自定義設置滑動返回的配置

  onTransitionStart：當轉換動畫即將開始時被調用的功能

  onTransitionEnd：當轉換動畫完成，將被調用的功能

path：路由中設置的路徑的覆蓋映射配置

initialRouteName：設置默認的頁面組件，必須是上面已注冊的頁面組件

initialRouteParams：初始路由參數

路由首頁

react：

image-20200601111638902

在react中初始化時沒有指定hash值，route會匹配路由表里面的根組件”/”

RN：

image-20200601111722749

RN 需要在StackNavigatorConfig里面指定首頁

RN路由使用

image-20200601112012191

在入口路由列表注冊完成之后 在導航器中的每一個頁面，都有 navigation 屬性 通過提供的navigate方法來提供跳轉

navigation

在導航器中每一個頁面都有navigation屬性，該屬性有以下幾個屬性/方法

navigate 跳轉到其他頁面 常用參數如下

routeName 導航器中配置的路由名稱

params 傳遞到下一個頁面的參數

state：state 里面包含有傳遞過來的參數 params 、 key 、路由名稱 routeName

setParams 更改當前頁面路由參數（后面詳細介紹）

goBack： 回退可穿參數

navigate

setParams