簡介
React Native在0.44版本中將Navigator從核心庫中刪除,主要推薦使用于今年一月份開源的React-navigation庫,據(jù)稱有原生般的性能體驗效果,可能成為未來React Native導航組件的主力軍,下面我們來介紹下該組件的主要屬性和方法.
這個庫主要包含三類組件:
1. StackNavigator: 用來跳轉頁面和傳遞參數(shù)
2. TabNavigator: 類似底部導航欄,用來在同一個屏幕下切換不同界面
3. DrawerNavigator: 側滑菜單導航欄,用于設置帶抽屜導航的屏幕
官方文檔: https://reactnavigation.org/docs/intro/
使用
1. 屬性介紹:
1. StackNavigator屬性介紹
navigationOptions：配置StackNavigator的一些屬性鸭丛。
title：標題，如果設置了這個導航欄和標簽欄的title就會變成一樣的，不推薦使用
header：可以設置一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設置為null
headerTitle：設置導航欄標題葱轩，推薦
headerBackTitle：設置跳轉頁面左側返回箭頭后面的文字召耘，默認是上一個頁面的標題宿崭∈臀可以自定義，也可以設置為null
headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭后的文字時微服，默認改成"返回"
headerRight：設置導航條右側趾疚。可以是按鈕或者其他視圖控件
headerLeft：設置導航條左側以蕴〔诼螅可以是按鈕或者其他視圖控件
headerStyle：設置導航條的樣式。背景色丛肮，寬高等
headerTitleStyle：設置導航欄文字樣式
headerBackTitleStyle：設置導航欄‘返回’文字樣式
headerTintColor：設置導航欄顏色
headerPressColorAndroid：安卓獨有的設置顏色紋理赡磅，需要安卓版本大于5.0
gesturesEnabled：是否支持滑動返回手勢，iOS默認支持宝与，安卓默認關閉
StackNavigator(RouteConfigs, StackNavigatorConfig) 構造函數(shù):
RouteConfigs: 主要是來配置頁面路由的,所有的界面都必須配置在里面.
screen：對應界面名稱焚廊，需要填入import之后的頁面
StackNavigatorConfig: 主要是配置整個路由的，包括跳轉動畫习劫，跳轉方式等.
initialRouteName: 初始化哪個界面為根界面咆瘟，如果不配置，默認使用RouteConfigs中的第一個頁面當做根界面
initialRouteParams: 初始化根界面參數(shù)诽里，主要是給根視圖傳遞一些參數(shù)袒餐，通過this.props.navigation.state.params可以取到
navigationOptions: 配置默認的navigationOptions
mode: 跳轉方式，一種是card，默認的灸眼，在iOS上是從右到左跳轉卧檐，在Android上是從下到上，都是使用原生系統(tǒng)的默認跳轉方式幢炸。一種是modal泄隔，只針對iOS平臺拒贱，模態(tài)跳轉宛徊。
headerMode: 跳轉過程中，導航條的動畫效果逻澳，有三個值闸天，float表示會漸變，類似于iOS的原生效果斜做，screen表示沒有漸變苞氮。none表示隱藏導航條
cardStyle: 可以統(tǒng)一定義界面的顏色，例如背景色
transitionConfig：配置頁面跳轉的動畫
onTransitionStart: 頁面跳轉動畫即將開始的回調
nTransitionEnd: 頁面跳轉動畫結束的回調
Navigation Prop
navigate：路由方法瓤逼，主要來啟動另一個頁面
state：狀態(tài)笼吟，其實StackNavigator內部維護了兩個路由棧，一個名為newState霸旗，是當前顯示頁面之前的所有頁面贷帮，包括當前界面。一個名為lastState诱告，當然撵枢，通過state還能拿到很多參數(shù)。
setParams: 設置參數(shù)精居，記住锄禽，一定不要在render方法中調用此方法。
goBack: 返回
dispatch: 給當前界面設置action靴姿，會替換原來的跳轉沃但，回退等事件
navigate
這個方法可以傳遞三個參數(shù): navigate(routeName, params, action)
routeName: 頁面名稱，一定要在路由配置中配置佛吓。
params: 傳遞參數(shù)到下一個頁面
action: action
setParams
設置當前頁面的參數(shù)绽慈，記住，調用此方法一定要在componentDidMount
componentDidMount() {
var {setParams} = this.props.navigation;
setParams({'haha':'abc'});
}
goBack
回退到指定界面辈毯，如果什么都不傳坝疼，回退到上一個界面，傳null谆沃，回退到任意界面钝凶。傳key，可以回退到指定界面
this.props.navigation.goBack();
this.props.navigation.goBack(null);
this.props.navigation.goBack('Profile');
2. TabNavigator在iOS上默認類似于TabBar，在Android中類似于TabLayout:
構造方法:
TabNavigator(RouteConfigs, TabNavigatorConfig)
RouteConfigs: 配置路由,也可以配置navigationOptions,但是,在這里配置的優(yōu)先級比在頁面中配置的優(yōu)先級高耕陷，所以掂名，我們一般在單個頁面中配置所有的navigationOptions。
screen：和導航的功能是一樣的哟沫，對應界面名稱饺蔑，可以在其他頁面通過這個screen傳值和跳轉。
TabNavigatorConfig:
1. tabBarComponent: 默認兩種方式嗜诀，TabBarBottom和TabBarTop猾警，可以通過如下代碼導入：import {TabBarBottom,TabBarTop} from 'react-navigation';，這兩者的區(qū)別主要是樣式和位置的區(qū)別隆敢，iOS上默認使用TabBarBottom发皿，Android上默認使用TabBarTop。
2. tabBarPosition: 配置tab的位置拂蝎，top和bottom
3. swipeEnabled: 是否可以滑動切換tab
4. animationEnabled: 點擊選項卡切換界面是否需要動畫
5. lazy: 是否懶加載界面穴墅，默認一次加載所有的界面，我們最好設置為true
6. tabBarOptions: tab的樣式等配置温自，我們下面詳細說
7. initialRouteName玄货，第一次初始化哪個界面，默認初始化第一個悼泌。
8. order松捉，tab排序，默認使用配置路由的順序
9. paths: 配置path
10. backBehavior券躁，當Android點擊返回鍵的時候惩坑，做的處理，initialRoute返回到初始化的界面也拜，none退出應用
tabBarOptions: 這個參數(shù)主要配置樣式以舒，針對TabBarBottom和TabBarTop。
TabBarBottom:
activeTintColor: 選中的文字顏色
activeBackgroundColor: 選中的背景色
inactiveTintColor： 未選中的文字顏色
inactiveBackgroundColor: 未選中的背景色
showLabel: 是否顯示標題慢哈，默認顯示
style: 定義item的樣式
labelStyle: 標題的樣式
TabBarTop:
activeTintColor: 選中的文字顏色
inactiveTintColor： 未選中的文字顏色
showIcon: 是否顯示圖標蔓钟，默認顯示
showLabel: 是否顯示標題，默認顯示
upperCaseLabel: 使用大寫字母
pressColor: 定義顏色卵贱，大約Android5.0的一種按壓效果
pressOpacity: 按壓下去的透明度谜疤，在iOS或者Android5.0之前
scrollEnabled: 是否能夠滾動玩祟，類似于今日頭條的標題頭
tabStyle: 定義item的樣式
indicatorStyle: 指示器的顏色
labelStyle: 文字的樣式
iconStyle: 圖標的樣式
style: 定義tab的樣式
NavigationOptions: 配置tabBarItem的相關屬性:
title: 標題
tabBarVisible: 是否可見
tabBarIcon: 配置圖片，當然，完全可以不使用圖片
tabBarLabel: 也是配置標題膘螟，只不過title既能配置tab的標題姻几，也能配置navigation的標題
3. DrawerNavigator屬性介紹:
navigationOptions: 配置側滑顯示的具體屬性(必須寫成這個名字),有以下參數(shù)
title：通用標題棉姐，當你不寫drawerLabel時工碾，使用此參數(shù)作為側滑標題，通常都不寫
drawerLabel：側滑標題
drawerIcon：側滑的標題圖標，這里會回傳兩個參數(shù)臀玄，{focused: boolean, tintColor: string}瓢阴，focused表示是否是選中狀態(tài)，tintColor表示選中的顏色健无，這個顏色是我們自己在根視圖定義的荣恐。當然，你也可以使用其他的組件來作為圖標累贤，比如Text組件叠穆。
打開側滑方法: this.props.navigation.navigate('DrawerOpen')
關閉側滑方法: this.props.navigation.navigate('DrawerClose')
構造方法:
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig) 接收兩個參數(shù)，一個為頁面路由配置畦浓，一個為顯示的配置.
RouteConfigs: 配置所有的界面
screen: 對應界面名稱痹束，可以在其他頁面通過這個screen傳值和跳轉
DrawerNavigatorConfig
drawerWidth: 側滑欄的寬度检疫，如果你不想寫死讶请，可以使用Dimensions獲取屏幕的寬度，動態(tài)計算
drawerPosition: 側滑的方向屎媳，left和right夺溢，默認left
contentComponent - 用于呈現(xiàn)抽屜內容的組件，例如導航項 接收抽屜的導航烛谊。 默認為DrawerItems,可以自定義側滑頁
contentOptions: 主要配置側滑欄條目的屬性风响，針對DrawerItems,可以通過這個屬性來設置顏色,背景顏色等
initialRouteName - 初始路由的routeName
order - 定義抽屜項目順序的routeNames數(shù)組。
路徑 - 提供routeName到路徑配置的映射丹禀，它覆蓋routeConfigs中設置的路徑状勤。
backBehavior - 后退按鈕是否會切換到初始路由？ 如果是双泪，設置為initialRoute持搜，否則為none。 默認為initialRoute行為
DrawerItems的contentOptions屬性
activeItemKey: 定義當前選中的頁面的key
activeTintColor - 選中條目狀態(tài)的文字顏色
activeBackgroundColor - 選中條目的背景色
inactiveTintColor - 未選中條目狀態(tài)的文字顏色
inactiveBackgroundColor - 未選中條目的背景色
onItemPress: 選中條目的回調焙矛，這個參數(shù)屬性為函數(shù)葫盼，會將當前路由回調過去
內容部分的樣式樣式對象
labelStyle - 當您的標簽是字符串時，要覆蓋內容部分中的文本樣式的樣式對象
二: 界面跳轉,傳值,取值
在界面組件注入到StackNavigator中時村斟，界面組件就被賦予了navigation屬性贫导，即在界面組件中可以通過this.props.navigation獲取并進行一些操作。
- 通過navigate函數(shù)實現(xiàn)界面之間跳轉:
this.props.navigation.navigate('Mine');
參數(shù)為我們在StackNavigator注冊界面組件時的名稱蟆盹。同樣也可以從當前頁面返回到上一頁：
this.props.navigation.goBack();
- 跳轉時傳值:
this.props.navigation.navigate('Mine',{info:'傳值過去'});
第一個參數(shù)同樣為要跳轉的界面組件名稱孩灯，第二個參數(shù)為要傳遞的參數(shù)，info可以理解為key逾滥，后面即傳遞的參數(shù)峰档。
- 獲取值:
{this.props.navigation.state.params.info}
通過state.params來獲取傳來的參數(shù)，后面為key值。此處為info面哥。
