react-navigation: 是一款RN中的導航組件, 是Navigator的加強版,支持底部導航類似IOS中的UITabBarController,此外也支持側拉效果方式的導航類似於Android中的DrawerLayout抽屜效果
什麼是導航器:
可以看做是一個普通的React組件,可以通過導航器來定義你的App導航結構,導航器還可以渲染通用元素,例如可以標題欄,底部的tab欄和頂部的選項卡欄
在react-navigation中有如下的7種類型的導航器
1 createStackNavigator: 類似於普通的Navigator,屏幕上方導航欄
2 createTabNavigator:已經棄用,使用createBottomTabNavigator和/或createMaterialTopTabNavigator替代
3 createBottomTabNavigator:相當於IOS中的TabBarController,屏幕下方的導航欄
4 createMateriaTopTabNavigator:屏幕頂部的材料設計主體標題欄
5 createDrawerNavigator:抽屜效果,側邊滑出
6 createSwitchNavigator: SwitchNavigator的用途是一次只顯示一個頁面
在學習七種導航器之前,學習兩個和導航關於概念:
Screen navigation prop(屏幕導航屬性) : 通過navigation可以完成屏幕之間的調度操作
Screen navigationOptions(屏幕導航選項) : 通過navigationOptions可以定製導航器顯示屏幕的方式(例如:頭部標題,選項卡標籤等)
重點: Screen navigation prop
當導航器中的屏幕被打開時,它會收到一個navigation prop, navigation prop是整個導航環節的關鍵一員,接下來就詳解一下navigation的作用:
1 navigate:跳轉到其他頁面
2 state:屏幕當前的state
3 setParans:改變路由的params
4 goBack: 關閉當前屏幕
5 dispatch:向路由發送一個action
6 addListener:訂閱導航生命週期的更新
7 isFocused:true 標誌屏幕獲取到了焦點
8 getParan:獲取具有回退的特定參數
9 dangerouslyGetParant:返回父導航器
使用navigate進行界面之前的跳轉
navigation.navigate({rootName,params,aciton,key}) 或navigation.navigate(rootName,params,action)
其中: rootName: 要跳轉界面的路由名,也就是在導航器中配置的路有名
params:要傳遞給下一個界面的參數
action: 如果該界面是一個navigator的話,將運行這個sub-action; key:要導航到的路由可選標誌符.如果已存在,將後退到此路由
createStackNavigator
createStackNavigator提供App屏幕之間的切換能力,以棧的形式管理屏幕之間的切換,新切換到的屏幕會放在棧的頂部
屏幕轉場風格: 默認情況下createStackNavigator提供了轉場過度效果,在Android上從屏幕底部淡入,在IOS上是從屏幕的右側劃入,當然也可以配置
createStackNavigator API:
createStackNavigator(RouterConfigs ,StackNavigatorConfig) : RouteConfigs(必選) : 路由配置對象是從路由名稱到路由配置的映射,告訴導航器該理由呈現什麼