前言
在前端的開發(fā)中，我們需要實現(xiàn)多個頁面的切換跳轉(zhuǎn)，iOS中使用Navigation實現(xiàn)頁面的跳轉(zhuǎn)，react Native中使用Navigator和NavigatorIOS來實現(xiàn)不同頁面間的切換。
一。實現(xiàn)原理及屬性
導(dǎo)航器通過路由對象來分辨不同的場景，利用renderScene方法，導(dǎo)航欄可以根據(jù)指定的路由來渲染場景。
1.1導(dǎo)航跳轉(zhuǎn)方法
react中的路由的存儲方式通過棧來存儲的，有先進后出的特性。
getCurrentRoutes()
獲取當前棧里的路由，也就是push進來，沒有pop掉的那些
jumpBack()?
?跳回之前的路由，當然前提是保留現(xiàn)在的，還可以再跳回來，會給你保留原樣。
jumpForward()
上一個方法不是調(diào)到之前的路由了么，用這個跳回來就好了。
jumpTo(route)?
跳轉(zhuǎn)到已有的場景并且不卸載。
push(route)
跳轉(zhuǎn)到新的場景，并且將場景入棧，你可以稍后跳轉(zhuǎn)過去
pop()?
跳轉(zhuǎn)回去并且卸載掉當前場景
replace(route)
用一個新的路由替換掉當前場景
replaceAtIndex(route, index)?
?替換掉指定序列的路由場景
replacePrevious(route)?
?替換掉之前的場景
resetTo(route) ?
跳轉(zhuǎn)到新的場景，并且重置整個路由棧
immediatelyResetRouteStack(routeStack）
?用新的路由數(shù)組來重置路由棧
popToRoute(route)?
?pop到路由指定的場景，在整個路由棧中，處于指定場景之后的場景將會被卸載。
popToTop()
pop到棧中的第一個場景，卸載掉所有的其他場景。
1.2導(dǎo)航屬性
configureScene ?= {（） =>{
return Navigator. SceneConfigs .HorizontalSwipeJump;
}}
可選的函數(shù)，用來配置場景動畫和手勢。會帶有兩個參數(shù)調(diào)用，一個是當前的路由，一個是當前的路由棧。然后它應(yīng)當返回一個場景配置對象.
場景配置對象：
Navigator.SceneConfigs.PushFromRight (默認)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
定義啟動時加載的路由。路由是導(dǎo)航欄用來識別渲染場景的一個對象。initialRoute必須是initialRouteStack中的一個路由。initialRoute默認為initialRouteStack中最后一項。
提供一個路由集合用來初始化。如果沒有設(shè)置初始路由的話則必須設(shè)置該屬性。如果沒有提供該屬性，它將被默認設(shè)置成一個只含有initialRoute的數(shù)組。
renderScene? function? (route, navigator) =><mySceneComponet title={route.title} navigator = {navigator}>?
兩個參數(shù)中的route包含的是initial的時候傳遞的name和component，而navigator是一個我們需要用的Navigator的對象；
所以當我們拿到route中的component的時候，我們就可以將navigator傳遞給它，正因為如此，我們的組件HomeScene才可以通過??this.props.navigator，拿到路由。
可選參數(shù)，提供一個在場景切換的時候保持的導(dǎo)航欄。
可選參數(shù)，提供從父導(dǎo)航器獲得的導(dǎo)航器對象。
onDidFocus ? ?function
每當導(dǎo)航切換完成或初始化之后，調(diào)用此回調(diào)，參數(shù)為新場景的路由。
會在導(dǎo)航切換之前調(diào)用，參數(shù)為目標路由。
將會應(yīng)用在每個場景的容器上的樣式。
1.3默認寫法
<Navigator
initialRoute={{name:defaultName,component:defaultComponent}}
configureScene={(route) => {
returnNavigator.SceneConfigs.HorizontalSwipeJumpFromRight;
}}
renderScene={(route,navigator) => {
letComponent=route.component;
return
}}
/>
二、Navigator.IOS
NavigatorIOS包裝了UIKit的導(dǎo)航功能，可以使用左劃功能來返回到上一界面。
2.1 ?常用的導(dǎo)航器方法
push(route)
導(dǎo)航器跳轉(zhuǎn)到一個新的路由。
pop()
回到上一頁。
popN(n)
回到N頁之前。當N=1的時候，效果和?pop()?一樣。
replace(route)
替換當前頁的路由，并立即加載新路由的視圖。
replacePrevious(route)
替換上一頁的路由/視圖。
replacePreviousAndPop(route)
替換上一頁的路由/視圖并且立刻切換回上一頁。
resetTo(route)
替換最頂級的路由并且回到它。
popToRoute(route)
一直回到某個指定的路由。
popToTop()
回到最頂層的路由。
2.2 ?常用的屬性
barTintColor?string
導(dǎo)航條的背景顏色。
initialRoute{
component: function, ? // 路由到對應(yīng)的版塊
title: string, ? // 標題
passProps: object, ? // 傳遞的參數(shù)
backButtonIcon: Image.propTypes.source, ?// 返回按鈕
backButtonTitle: string, ?// 返回按鈕標題
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ù)都是這樣的路由對象。
itemWrapperStyle ? ?View#style
導(dǎo)航器中的組件的默認屬性。一個常見的用途是設(shè)置所有頁面的背景顏色。
navigationBarHidden??bool
一個布爾值，決定導(dǎo)航欄是否隱藏。
shadowHidden?bool
一個布爾值，決定是否要隱藏1像素的陰影。
tintColor?string
導(dǎo)航欄上按鈕的顏色。
titleTextColor?string
導(dǎo)航器標題的文字顏色。
translucent?bool
一個布爾值，決定是否導(dǎo)航條是半透明的。
注：本組件并非由Facebook官方開發(fā)組維護。
這一組件的開發(fā)完全由社區(qū)主導(dǎo)。如果純js的方案能夠滿足你的需求的話，那么我們建議你選擇Navigator組件。
原理圖：
第一步。設(shè)置TabBar
NavigatorIOS在每個TabBarItem中設(shè)置
設(shè)置屬性：
運行結(jié)果：
在此學習過程中遇到的問題：
在設(shè)置TabBarItem是，只設(shè)置屬性，運行之后會報這個錯誤，是因為，TabBarItem中沒有組件，確實組件。
今天的完整代碼就不在上傳，后期會做一個簡單的小demo,將詳細的把這段時候?qū)W習的運用一下，由于今天有bug還有調(diào)試出來，固今天就不在上傳代碼。
謝謝啦?。?/p>
