作者：阿鍾

部落格：http://blog.csdn.net/a_zhon

此部落格基於react-native-0.48.4

Navigator（導航欄）

在ReactNative v0.43之前的時候官方提供了Navigator元件，在v0.44版本之後官方就把他廢棄了這是為什麼呢？原因就是有個比他更好的react-navigation導航欄了、不得不說第三方依賴庫真的很強大。

React Navigation

• 官網地址：https://reactnavigation.org

• 其中包含了我們開發中最常用的三種導航方式 
  

  • StackNavigator（頂部導航欄）

  • TabNavigator （標籤導航欄）

  • DrawerNavigator（側滑選單導航欄）

  • 效果圖可以在官網首頁看下

這篇文章就簡單來說說StackNavigator

• 既然使用的是第三方庫，如果在你專案的node_modules資料夾中沒有react-navigation那麼你需要執行如下命令

引入react-navigation中的StackNavigator

• 建立一個Application.js檔案

這個檔案負責對我們需要跳轉的頁面進行註冊（相當於在Android中每一個Activity都需要在清單檔案中註冊），同時也建立了navigation供後續操作。

• 修改 android 和 ios 的入口檔案載入這個檔案，然後就會繼續載入Main頁面 最終顯示內容

效果圖： 

在Main頁面新增一個按鈕跳轉至下一個頁面、並修改導航欄的樣式

這裡就要重點說一說navigationOptions中的屬性了

• 可以參考一下這篇文章react-navigation使用技巧或者官網給出的屬性介紹

• headerTitle: '標題' ===> 導航欄的標題

• header: null ===> 隱藏導航欄
  

• headerTintColor: 'white' ===> 返回按鈕的顏色
  

• headerTitleStyle: {} ===> 導航欄文字的樣式
  

• headerStyle: {} ===> 導航欄的樣式
  

• headerRight: (< View/>) ===> 設定頂部導航欄友邊的檢視 和 解決當有返回箭頭時，文字不居中

  
  

• headerLeft: (< View/>) ===> 設定導航欄左邊的檢視 和 去除返回箭頭
  

• headerBackTitle: null ===> 設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題
  

• gestureResponseDistance: {horizontal: 300} ===> //設定滑動返回的距離

上面跳轉頁面的時候我們向下一個頁面傳遞了一個鍵值為key的引數

頁面接收傳遞過來的值

頁面跳轉效果圖（有點失幀）

Details頁面這裡就不貼出了，跟Main內容都是差不多的。可以檢視文末給出的原始碼

主要說一下最後一個帶有選單的頁面

• 主要還是配置navigationOptions屬性

• 隱藏左邊返回箭頭：headerLeft: (< View/>),

• 新增右邊的選單：headerRight: (),

對選單新增點選事件,新增headerRight檢視的時候我們已經呼叫好了方法現在只需要定義即可

• 需要在view渲染完成之後新增點選事件
  

• 點選事件響應的函式

Navigator：

http://reactnative.cn/docs/0.43/navigator.html#content

react-navigation：

https://reactnavigation.org/

react-navigation使用技巧：

http://www.jianshu.com/p/2f575cc35780

屬性介紹：

https://reactnavigation.org/docs/navigators/stack

碼源：

https://github.com/azhon/ReactNative/tree/master/Pagejump

一命二運三風水，四修陰德五讀書！

劉桂林

微訊號 : Android_LiuGuiLin

新浪微博：@劉某人程式設計師