2020-5-22 seo達(dá)人
前言
在平時(shí)H5或者RN開發(fā)時(shí)，我們業(yè)務(wù)場景中大部分都不是單頁面的需求，那這時(shí)我們就能使用路由在進(jìn)行多頁面的切換。下面會(huì)對(duì)比一下react路由和RN路由的本質(zhì)區(qū)別和使用方法。
路由（routing）是指分組從源到目的地時(shí)，決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程
React路由
簡介
使用React構(gòu)建的單頁面應(yīng)用，要想實(shí)現(xiàn)頁面間的跳轉(zhuǎn)，首先想到的就是使用路由。在React中，常用的有兩個(gè)包可以實(shí)現(xiàn)這個(gè)需求，那就是react-router和react-router-dom。本文主要針對(duì)react-router-dom進(jìn)行說明
在根組件上配置路由，引用react-router-dom結(jié)構(gòu){ HashRouter as Router, Route ,Link ,Redirect ,Switch }，HashRouter組件是路由的根組件，定義屬性和方法傳遞給子組件。Router組件進(jìn)行路由，指定每個(gè)路由跳轉(zhuǎn)到相應(yīng)的組件。Link組件指定跳轉(zhuǎn)鏈接。Redirect組件路由重定向，不管什么情況下，都會(huì)跳轉(zhuǎn)當(dāng)前指定的路徑，和switch組件聯(lián)合起來一起調(diào)用，當(dāng)路徑匹配到路由，不在往下匹配
兩類路由
HashRouter：利用監(jiān)聽hash變化（有一個(gè)事件hashchange）實(shí)現(xiàn)路由切換，它是路由容器，
渲染子組件，并向下層子組件傳遞（Context上下文傳遞）loaction,history等路由信息
BrowserHistory：利用H5Api實(shí)現(xiàn)路由切換，是路由容器，渲染子組件，
并向子組件傳遞loaction,history等路由信息
路由配置
image-20200601110809995
路由實(shí)現(xiàn)原理
HashRouter只是一個(gè)容器，本身并沒有DOM結(jié)構(gòu)
它渲染的就是它的子組件，并向下層傳遞location
組件掛載完成之后根據(jù)hash改變pathname的值，如果沒有hash值就默認(rèn)展示根組件
需要跳轉(zhuǎn)路由頁面時(shí)我們使用link或者push去賦值hash的pathname 如this.props.history.push({ pathname: preview, param: { pic, index } });
當(dāng)hash值發(fā)生變化的時(shí)候會(huì)通過hashchange捕獲變化，并給pathname重新賦值
拿到上下文中傳過來的location，然后取出pathname。再對(duì)它的子組件進(jìn)行遍歷，如果子組件的path屬性和當(dāng)前上下文中傳過來的pathname屬性相匹配就進(jìn)行渲染，若不匹配就返回null。
總結(jié)
React路由是實(shí)質(zhì)就是，根據(jù)遍歷識(shí)別路由的pathname，來切換router路由容器中component組件的加載渲染。每次更改pathname就都是組件的重新渲染流程，頁面也都會(huì)呈現(xiàn)出刷新的效果。
RN路由
簡介
RN把導(dǎo)航和路由都集中到了react-navigation庫里面
組件使用堆棧式的頁面導(dǎo)航來實(shí)現(xiàn)各個(gè)頁面跳轉(zhuǎn)
構(gòu)造函數(shù)：StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs：頁面路由配置
StackNavigatorConfig：路由參數(shù)配置
路由配置
image-20200601111333107
參數(shù)詳解
navigationOptions：配置StackNavigator的一些屬性。
title：標(biāo)題，如果設(shè)置了這個(gè)導(dǎo)航欄和標(biāo)簽欄的title就會(huì)變成一樣的，不推薦使用
header：可以設(shè)置一些導(dǎo)航的屬性，如果隱藏頂部導(dǎo)航欄只要將這個(gè)屬性設(shè)置為null
headerTitle：設(shè)置導(dǎo)航欄標(biāo)題，推薦
headerBackTitle：設(shè)置跳轉(zhuǎn)頁面左側(cè)返回箭頭后面的文字，默認(rèn)是上一個(gè)頁面的標(biāo)題。可以自定義，也可以設(shè)置為null
headerTruncatedBackTitle：設(shè)置當(dāng)上個(gè)頁面標(biāo)題不符合返回箭頭后的文字時(shí)，默認(rèn)改成"返回"
headerRight：設(shè)置導(dǎo)航條右側(cè)。可以是按鈕或者其他視圖控件
headerLeft：設(shè)置導(dǎo)航條左側(cè)。可以是按鈕或者其他視圖控件
headerStyle：設(shè)置導(dǎo)航條的樣式。背景色，寬高等
headerTitleStyle：設(shè)置導(dǎo)航欄文字樣式
headerBackTitleStyle：設(shè)置導(dǎo)航欄‘返回’文字樣式
headerTintColor：設(shè)置導(dǎo)航欄顏色
headerPressColorAndroid：安卓獨(dú)有的設(shè)置顏色紋理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑動(dòng)返回手勢，iOS默認(rèn)支持，安卓默認(rèn)關(guān)閉
screen：對(duì)應(yīng)界面名稱，需要填入import之后的頁面
mode：定義跳轉(zhuǎn)風(fēng)格
card：使用iOS和安卓默認(rèn)的風(fēng)格
modal：iOS獨(dú)有的使屏幕從底部畫出。類似iOS的present效果
headerMode：返回上級(jí)頁面時(shí)動(dòng)畫效果
float：iOS默認(rèn)的效果
screen：滑動(dòng)過程中，整個(gè)頁面都會(huì)返回
none：無動(dòng)畫
cardStyle：自定義設(shè)置跳轉(zhuǎn)效果
transitionConfig： 自定義設(shè)置滑動(dòng)返回的配置
onTransitionStart：當(dāng)轉(zhuǎn)換動(dòng)畫即將開始時(shí)被調(diào)用的功能
onTransitionEnd：當(dāng)轉(zhuǎn)換動(dòng)畫完成，將被調(diào)用的功能
path：路由中設(shè)置的路徑的覆蓋映射配置
initialRouteName：設(shè)置默認(rèn)的頁面組件，必須是上面已注冊(cè)的頁面組件
initialRouteParams：初始路由參數(shù)
路由首頁
react：
image-20200601111638902
在react中初始化時(shí)沒有指定hash值，route會(huì)匹配路由表里面的根組件”/”
RN：
image-20200601111722749
RN 需要在StackNavigatorConfig里面指定首頁
RN路由使用
image-20200601112012191
在入口路由列表注冊(cè)完成之后 在導(dǎo)航器中的每一個(gè)頁面，都有 navigation 屬性 通過提供的navigate方法來提供跳轉(zhuǎn)
navigation
在導(dǎo)航器中每一個(gè)頁面都有navigation屬性，該屬性有以下幾個(gè)屬性/方法
navigate 跳轉(zhuǎn)到其他頁面 常用參數(shù)如下
routeName 導(dǎo)航器中配置的路由名稱
params 傳遞到下一個(gè)頁面的參數(shù)
state：state 里面包含有傳遞過來的參數(shù) params 、 key 、路由名稱 routeName
setParams 更改當(dāng)前頁面路由參數(shù)（后面詳細(xì)介紹）
goBack： 回退可穿參數(shù)
navigate
setParams
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn