React Native中自定義導覽列

這是2017年年初開始的公司的項目，對于導覽列的要求很高，Android和iOS上必須用一緻的UI，按鈕位置還有各種顔色都有要求，而且要适應各種奇葩要求。

嘗試了一下當時React Native自帶的導航，完全不符合要求，于是自己手寫了一個導航。

Github位址：github.com/gaoxiaosong…

目前支援如下功能：

• 橫屏和豎屏模式。
• 安全區域支援。
• Android和iPhone X的支援。
• absolute布局支援。
• 回退按鈕自動執行。
• 标題是否居中。
• 導覽列下方分隔線。
• 自定義按鈕文本或元件。
• 回退按鈕支援圖檔+文本。
• 全局和臨時自定義樣式。

設計思路

純粹使用Javascript寫的，沒有原生部分代碼。導覽列分為兩大部分：空白區域和内容區域。

另外整體還需要考慮布局，即position是relative還是absolute的情況，relative即正常的流式布局，absolute是絕對布局，背景色一般是透明的，下方視圖滾動到一定距離後，背景色和按鈕、标題顔色可能會由透明變成不透明。

空白區域

上方和左右空出的位置，用于适應上方的狀态欄，以及橫屏時候iPhone X左右的安全區域。

狀态欄的高度，要考慮在普通iPhone上的20pt，以及在iPhone X系列裝置上的44pt，還有安卓裝置的Translucent屬性，以及橫屏狀态下iPhone會隐藏狀态欄，安卓會保留狀态欄。

内容區域

還有導覽列本身的内容，高度是44pt，包括左側按鈕區域、标題區域、右側按鈕區域。

左右兩側的按鈕區域，有可能由一個或多個按鈕組成，這裡有隻有圖示的按鈕，隻有文本的按鈕，回退按鈕，以及帶文本的回退按鈕等類型。

而标題區域，也有隻有文本的标題，以及自定義視圖的标題，比如點選後彈出下拉選擇框的标題。

使用方法

首先，安裝這個庫，可以用yarn或者npm安裝(二者選其一即可)：

yarn add react-native-pure-navigation-bar
npm install --save react-native-pure-navigation-bar
複制代碼
           

在程式中使用時，直接導入：

import NaviBar from 'react-native-pure-navigation-bar';
複制代碼
           

然後直接在一個頁面中，加入進去元件即可：

render() {
  return (
    <View style={{flex: 1}}>
      <NaviBar title={'測試頁面'} ... />
      ...
    </View>
  );
}
複制代碼
           

可以傳遞的屬性如下：

屬性名	描述
title	标題文本或者一個視圖元件
titleCenter	标題是否居中，預設是true
hasSeperatorLine	内容區域底部是否有分隔線，預設是true
leftElement	左側按鈕區域，可以是文本或者數組，預設是隻有一個回退按鈕辨別
rightElement	配置同上，預設為空
onLeft	左側按鈕點選回調，會傳遞一個index，如果是回退按鈕，則傳回值是false即停止執行自動goBack操作
onRight	右側按鈕點選回調，同上參數
autoCloseKeyboard	回退時是否自動關閉鍵盤，預設是true
autoHardwareBack	是否自動添加Android的回退按鍵操作，預設執行和回退按鈕相同的操作
disableLock	是否禁用按鈕點選鎖，預設不禁用，即相同按鈕點選執行過程中再點選無效
gobackImage	回退按鈕的預設圖檔
gobackText	回退按鈕中的文字，預設沒有
isAbsolute	是否開啟postion為absolute的布局
isTranslucent	Android裝置是否設定Translucent屬性，參見React Native的StatusBar中的相應屬性
safeOptions	安全區域選項，預設開啟上、左、右三個部分，其中左和右主要針對iPhone X裝置的橫屏模式
style	自定義樣式

修改自定義樣式

我們可以全局的修改，也可以臨時的修改，樣式的區域鍵請參照

src/style.js

中的鍵名。

全局修改的方法(修改其他全局配置同樣是更改

defaultProps

)：

import { InnerNaviBar } from 'react-native-pure-navigation-bar';

InnerNaviBar.defaultProps.style.xxx = {
  // custom style
};
複制代碼
           

其中

xxx

就是

src/style.js

中的鍵名。

臨時修改則直接傳遞屬性到

style

中即可，也是同樣的按照鍵名來覆寫。

其他工具

可以通過如下方式導入工具：

import { xxx } from 'react-native-pure-navigation-bar';
複制代碼
           

其中

xxx

對應如下：

名稱	用途
InnerNaviBar	NaviBar的内部實作，主要用來修改 defaultProps ，而 export default 導出的NaviBar是加上了 withNavigation 高階元件的，用于自動連接配接導航器
NAVBAR_HEIGHT	導覽列高度，始終是44
GOBACK_BUTTON	回退按鈕的辨別，用于在 leftElement 和 rightElement 中傳遞，表示這一項是回退按鈕
GOBACK_IMAGE	回退按鈕的預設圖檔
forceInset	用于 SafeAreaView 的 forceInset 屬性，直接用 forceInset={forceInset(0,1,0,1)} 替代複雜的參數結構
getSafeAreaInset	擷取安全區域，有兩個參數，第一個isLandscape參數，如果不傳，則表示動态判斷；第二個isTranslucent參數僅用于Android。傳回上下左右四個方向的安全間距

樣例工程

在

example

目錄中有樣例代碼，隻有JS部分。運作方法如下：

• 進入

  example

  目錄，運作

  yarn

  或者

  npm install

  ；
• 繼續運作

  npm start

  。
• 換一個其他位置，運作

  react-native init test

  建立一個測試工程，然後運作這個工程，連接配接到之前

  npm start

  啟動的http伺服器上即可。

目前支援RN 0.57.3。

最後

這個導覽列前後耗費了很久，才算調試的比較穩定而且能滿足各種要求了。

歡迎各位在Issue留言，還有希望能給個

Star

哦~

我個人在Github上還有很多react-native相關的代碼庫，歡迎Star以及Follow~~

轉載于:https://juejin.im/post/5bfe0793e51d4538e36241b6