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