前言
在前端的開發(fā)中吱七，我們需要實現(xiàn)多個頁面的切換跳轉(zhuǎn)刚盈，iOS中使用Navigation實現(xiàn)頁面的跳轉(zhuǎn)羡洛，react Native中使用Navigator和NavigatorIOS來實現(xiàn)不同頁面間的切換。
一藕漱。實現(xiàn)原理及屬性
導航器通過路由對象來分辨不同的場景欲侮，利用renderScene方法，導航欄可以根據(jù)指定的路由來渲染場景肋联。
1.1導航跳轉(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導航屬性
configureScene ?= {（） =>{
return Navigator. SceneConfigs .HorizontalSwipeJump;
}}
可選的函數(shù)纺非，用來配置場景動畫和手勢哑了。會帶有兩個參數(shù)調(diào)用赘方，一個是當前的路由，一個是當前的路由棧弱左。然后它應當返回一個場景配置對象.
場景配置對象：
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中最后一項跳夭。
提供一個路由集合用來初始化。如果沒有設(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ù)雾鬼，提供一個在場景切換的時候保持的導航欄。
可選參數(shù)宴树，提供從父導航器獲得的導航器對象策菜。
onDidFocus ? ?function
每當導航切換完成或初始化之后，調(diào)用此回調(diào)酒贬，參數(shù)為新場景的路由又憨。
會在導航切換之前調(diào)用，參數(shù)為目標路由锭吨。
將會應用在每個場景的容器上的樣式蠢莺。
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)
導航器跳轉(zhuǎn)到一個新的路由。
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, ? // 傳遞的參數(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使用"路由"對象來包含要渲染的子視圖、它們的屬性颊咬、以及導航條配置务甥。"push"和任何其它的導航函數(shù)的參數(shù)都是這樣的路由對象。
itemWrapperStyle ? ?View#style
導航器中的組件的默認屬性喳篇。一個常見的用途是設(shè)置所有頁面的背景顏色敞临。
navigationBarHidden??bool
一個布爾值，決定導航欄是否隱藏麸澜。
shadowHidden?bool
一個布爾值挺尿，決定是否要隱藏1像素的陰影。
tintColor?string
導航欄上按鈕的顏色炊邦。
titleTextColor?string
導航器標題的文字顏色编矾。
translucent?bool
一個布爾值，決定是否導航條是半透明的馁害。
注：本組件并非由Facebook官方開發(fā)組維護窄俏。
這一組件的開發(fā)完全由社區(qū)主導。如果純js的方案能夠滿足你的需求的話碘菜，那么我們建議你選擇Navigator組件凹蜈。
原理圖：
第一步。設(shè)置TabBar
NavigatorIOS在每個TabBarItem中設(shè)置
設(shè)置屬性：
運行結(jié)果：
在此學習過程中遇到的問題：
在設(shè)置TabBarItem是忍啸，只設(shè)置屬性仰坦，運行之后會報這個錯誤，是因為计雌，TabBarItem中沒有組件悄晃，確實組件。
今天的完整代碼就不在上傳凿滤，后期會做一個簡單的小demo,將詳細的把這段時候?qū)W習的運用一下传泊，由于今天有bug還有調(diào)試出來，固今天就不在上傳代碼鸭巴。
謝謝啦！拦盹！
