(申明: 此系列教程,轉(zhuǎn)載旋之華微信公眾號,如有侵權(quán) . 通知刪除~)
(大家可以添加他的微信公眾號了解更多內(nèi)容.)
在開發(fā)中，我們需要實(shí)現(xiàn)多個(gè)界面的切換，這時(shí)候就需要一個(gè)導(dǎo)航控制器來進(jìn)行各種效果的切換。那么，在React Native中有兩個(gè)組件能夠?qū)崿F(xiàn)這樣的效果：Navigator和NavigatorIOS。
其中Navigator是適配Android和iOS，而NavigatorIOS則是
包裝了UIKit的導(dǎo)航功能，可以使用左劃功能來返回到上一界面。
一、Navigator
很多時(shí)候，我們需要導(dǎo)航器來應(yīng)對不同場景（頁面）間的切換。它通過路由對象來分辨不同的場景，我們這里采用的就是 `renderScene` 方法，根據(jù)指定的路由來渲染。
1.1 常用的屬性
initialRoute ={{ name: 'home', component: HomeScene }}
這個(gè)指定了默認(rèn)的頁面，也就是啟動的組件頁面
** configureScene ={() => {**
return Navigator. SceneConfigs .HorizontalSwipeJump;
}}
頁面之間跳轉(zhuǎn)時(shí)候的動畫手勢，可以看這個(gè)目錄:
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳轉(zhuǎn)的時(shí)候的方向)，比如：
PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump
等等。
** renderScene **
具體是方法如下:
(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />
兩個(gè)參數(shù)中的route包含的是initial的時(shí)候傳遞的name和component，而navigator是一個(gè)我們需要用的Navigator的對象；
所以當(dāng)我們拿到route中的component的時(shí)候，我們就可以將navigator傳遞給它，正因?yàn)槿绱?，我們的組件HomeScene才可以通過 this.props.navigator，拿到路由。
**initialRouteStack [object] 參數(shù)對象數(shù)組 **
這是一個(gè)初始化的路由數(shù)組進(jìn)行初始化。如果initalRoute屬性沒有設(shè)置的話，那么就必須設(shè)置initialRouteStack屬性，使用該最后一項(xiàng)作為初始路由。 如果initalRouteStack屬性沒有設(shè)置的話，該會生成只包含initalRoute值的數(shù)組
**navigationBar node **
該為可選的參數(shù)，在頁面切換中用來提供一個(gè)導(dǎo)航欄
navigator object
該為可選參數(shù)，可以從父類導(dǎo)航器中獲取導(dǎo)航器對象
sceneStyle 樣式風(fēng)格
該繼承了View視圖的所有樣式風(fēng)格，用于設(shè)置每個(gè)頁面容器的風(fēng)格
1.2 常用的導(dǎo)航器方法
當(dāng)獲取了導(dǎo)航器對象的引用，我們可以進(jìn)行調(diào)用以下一些方法來實(shí)現(xiàn)頁面導(dǎo)航功能:
getCurrentRoutes()
該進(jìn)行返回存在的路由列表信息
jumpBack()
該進(jìn)行回退操作 但是該不會卸載(刪除)當(dāng)前的頁面
jumpForward()
進(jìn)行跳轉(zhuǎn)到相當(dāng)于當(dāng)前頁面的下一個(gè)頁面
jumpTo(route)
根據(jù)傳入的一個(gè)路由信息，跳轉(zhuǎn)到一個(gè)指定的頁面(該頁面不會卸載刪除)
push(route)
導(dǎo)航切換到一個(gè)新的頁面中，新的頁面進(jìn)行壓入棧。通過jumpForward()方法可以回退過去
pop()
當(dāng)前頁面彈出來，跳轉(zhuǎn)到棧中下一個(gè)頁面，并且卸載刪除掉當(dāng)前的頁面
replace(route)
只用傳入的路由的指定頁面進(jìn)行替換掉當(dāng)前的頁面
replaceAtIndex(route,index)
傳入路由以及位置索引，使用該路由指定的頁面跳轉(zhuǎn)到指定位置的頁面
replacePrevious(route)
傳入路由，通過指定路由的頁面替換掉前一個(gè)頁面
resetTo(route)
進(jìn)行導(dǎo)航到新的界面，并且重置整個(gè)路由棧
immediatelyResetRouteStack(routeStack)
該通過一個(gè)路由頁面數(shù)組來進(jìn)行重置路由棧
popToRoute(route)
進(jìn)行彈出相關(guān)頁面，跳轉(zhuǎn)到指定路由的頁面，彈出來的頁面會被卸載刪除
popToTop()
進(jìn)行彈出頁面，導(dǎo)航到棧中的第一個(gè)頁面，彈出來的所有頁面會被卸載刪除
1.3 默認(rèn)寫法
<pre style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; color: rgb(62, 62, 62); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><
Navigator
initialRoute
=
{{
name
:
defaultName
,
component
:
defaultComponent
}}
configureScene
=
{(
route
) => {
return
Navigator.
SceneConfigs
.
HorizontalSwipeJumpFromRight
;
}}
renderScene
=
{(
route
,
navigator
) => {
let
Component
=
route
.
component
;
return
<
Component
{...
route
.
props
}
navigator
=
{
navigator
} />
}}
/></pre>
二、Navigator.IOS
NavigatorIOS包裝了UIKit的導(dǎo)航功能，可以使用左劃功能來返回到上一界面。
**2 **.1 常用的導(dǎo)航器方法****
- **push(route) **
- 導(dǎo)航器跳轉(zhuǎn)到一個(gè)新的路由。
- pop()
- 回到上一頁。
- **popN(n) **
- 回到N頁之前。當(dāng)N=1的時(shí)候，效果和 pop() 一樣。
- **replace(route) **
- 替換當(dāng)前頁的路由，并立即加載新路由的視圖。
- **replacePrevious(route) **
- 替換上一頁的路由/視圖。
- **replacePreviousAndPop(route) **
- 替換上一頁的路由/視圖并且立刻切換回上一頁。
- **resetTo(route) **
- 替換最頂級的路由并且回到它。
- popToRoute(route)
- 一直回到某個(gè)指定的路由。
- **popToTop() **
- 回到最頂層的路由。
**2 **.2 常用的屬性****
barTintColor string
導(dǎo)航條的背景顏色。
** initialRoute **
{
component: function, // 路由到對應(yīng)的版塊
title: string, // 標(biāo)題
passProps: object, // 傳遞的參數(shù)
backButtonIcon: Image.propTypes.source, // 返回按鈕
backButtonTitle: string, // 返回按鈕標(biāo)題
leftButtonIcon:
Image.propTypes.source,
leftButtonTitle: string,
onLeftButtonPress: function,
rightButtonIcon: Image.propTypes.source,
rightButtonTitle: string,
onRightButtonPress: function,
wrapperStyle: [object Object]
}
NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導(dǎo)航條配置。"push"和任何其它的導(dǎo)航函數(shù)的參數(shù)都是這樣的路由對象。
比如：下面新聞列表跳轉(zhuǎn)到新聞詳情頁詳情頁：
itemWrapperStyle View#style
導(dǎo)航器中的組件的默認(rèn)屬性。一個(gè)常見的用途是設(shè)置所有頁面的背景顏色。
navigationBarHidden bool
一個(gè)布爾值，決定導(dǎo)航欄是否隱藏。
**shadowHidden bool **
一個(gè)布爾值，決定是否要隱藏1像素的陰影。
**tintColor string **
導(dǎo)航欄上按鈕的顏色。
** titleTextColor string **
導(dǎo)航器標(biāo)題的文字顏色。
**translucent bool **
一個(gè)布爾值，決定是否導(dǎo)航條是半透明的。
三、綜合小案例
****3.1 部分核心代碼****
****3.2 運(yùn)行效果圖****
圖1-1 新聞列表頁
圖1-2 新聞詳情頁
圖1-3 個(gè)人中心頁面
