react-navigation 使用詳解

一、開源庫介紹

今年1月份，新開源的React-natvigation庫備受矚目。在短短不到3個月的時間，github上星數已達4000+。Fb推薦使用庫，並且在react Native當前最新版本0.44中將Navigator刪除。react-navigation據稱有原生般的效能體驗效果。可能會成為未來React Native導航組件的主流軍。本篇內容基於【 ^1.0.0-beta.9 】版本來介紹關於該庫的使用和實戰技巧。可以看到，雖然是beta版本，不過基本穩定，大家可放心在項目中使用。該庫包含三類組件：

（1）StackNavigator：用來跳轉頁面和傳遞參數
（2）TabNavigator：類似底部導覽列，用來在同一螢幕下切換不同介面

（3）DrawerNavigator：側滑菜單導覽列，用於輕鬆設定帶抽屜導航的螢幕

二、react-navigation使用

具體內容大致分為如下：

（1）react-navigation庫屬性介紹

（2）StackNavigator、TabNavigator實現介面間跳轉，Tab切換

（3）StackNavigator介面間跳轉、傳值、取值

（4）DrawerNavigator實現抽屜導覽功能表

（5）DrawerNavigator擴充功能

（6）自訂react-navigation

1、StackNavigator屬性介紹 [html]  view plain  copy navigationOptions：配置StackNavigator的一些屬性。          title：標題，如果設定了這個導覽列和標籤欄的title就會變成一樣的，不推薦使用       header：可以設定一些導航的屬性，如果隱藏頂部導覽列只要將這個屬性設定為null       headerTitle：設定導覽列標題，推薦       headerBackTitle：設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題。可以自訂，也可以設定為null       headerTruncatedBackTitle：設定當上個頁面標題不符合返回箭頭後的文字時，預設改成"返回"       headerRight：設定導航條右側。可以是按鈕或者其他視圖控制項       headerLeft：設定導航條左側。可以是按鈕或者其他視圖控制項       headerStyle：設定導航條的樣式。背景色，寬高等       headerTitleStyle：設定導覽列文字樣式       headerBackTitleStyle：設定導覽列‘返回’文字樣式       headerTintColor：設定導覽列顏色       headerPressColorAndroid：安卓專屬的設定顏色紋理，需要安卓版本大於5.0       gesturesEnabled：是否支援滑動返回手勢，iOS預設支援，安卓預設關閉          screen：對應介面名稱，需要填入import之後的頁面      mode：定義跳轉風格         card：使用iOS和安卓預設的風格         modal：iOS專屬的使螢幕從底部畫出。類似iOS的present效果      headerMode：返回上級頁面時動畫效果         float：iOS預設的效果         screen：滑動過程中，整個頁面都會返回         none：無動畫      cardStyle：自訂設定跳轉效果         transitionConfig： 自訂設定滑動返回的配置         onTransitionStart：當轉換動畫即將開始時被調用的功能         onTransitionEnd：當轉換動畫完成，將被調用的功能      path：路由中設定的路徑的覆蓋映射配置      initialRouteName：設定預設的頁面組件，必須是上面登入的頁面組件      initialRouteParams：初始路由參數  

註：大家可能對於path不太理解。path屬性適用於其他app或瀏覽器使用url開啟本app並進入指定頁面。path屬性用於聲明一個介面路徑，例如：【/pages/Home】。此時我們可以在手機瀏覽器中輸入：app名稱://pages/Home來啟動該App，並進入Home介面。

2、TabNavigator屬性介紹
[html]  view plain  copy screen：和導航的功能是一樣的，對應介面名稱，可以在其他頁面通過這個screen傳值和跳轉。         navigationOptions：配置TabNavigator的一些屬性      title：標題，會同時設定導航條和標籤欄的title      tabBarVisible：是否隱藏標籤欄。預設不隱藏(true)      tabBarIcon：設定標籤欄的表徵圖。需要給每個都設定      tabBarLabel：設定標籤欄的title。推薦