這是2017年年初開始的公司的項目脆霎，對于導(dǎo)航條的要求很高轩娶，Android和iOS上必須用一致的UI囚衔，按鈕位置還有各種顏色都有要求题篷，而且要適應(yīng)各種奇葩要求。

嘗試了一下當(dāng)時React Native自帶的導(dǎo)航斧散，完全不符合要求供常，于是自己手寫了一個導(dǎo)航。

Github地址：https://github.com/gaoxiaosong/react-native-pure-navigation-bar

目前支持如下功能：

• 橫屏和豎屏模式鸡捐。
• 安全區(qū)域支持栈暇。
• Android和iPhone X的支持。
• absolute布局支持箍镜。
• 回退按鈕自動執(zhí)行源祈。
• 標(biāo)題是否居中。
• 導(dǎo)航條下方分隔線色迂。
• 自定義按鈕文本或組件香缺。
• 回退按鈕支持圖片+文本。
• 全局和臨時自定義樣式歇僧。

設(shè)計思路

純粹使用Javascript寫的图张，沒有原生部分代碼。導(dǎo)航條分為兩大部分：空白區(qū)域和內(nèi)容區(qū)域诈悍。

另外整體還需要考慮布局祸轮，即position是relative還是absolute的情況，relative即正常的流式布局侥钳，absolute是絕對布局适袜，背景色一般是透明的，下方視圖滾動到一定距離后舷夺，背景色和按鈕苦酱、標(biāo)題顏色可能會由透明變成不透明。

空白區(qū)域

上方和左右空出的位置给猾，用于適應(yīng)上方的狀態(tài)欄疫萤，以及橫屏?xí)r候iPhone X左右的安全區(qū)域。

狀態(tài)欄的高度敢伸，要考慮在普通iPhone上的20pt扯饶，以及在iPhone X系列設(shè)備上的44pt，還有安卓設(shè)備的Translucent屬性详拙，以及橫屏狀態(tài)下iPhone會隱藏狀態(tài)欄帝际，安卓會保留狀態(tài)欄。

內(nèi)容區(qū)域

還有導(dǎo)航條本身的內(nèi)容饶辙，高度是44pt蹲诀，包括左側(cè)按鈕區(qū)域、標(biāo)題區(qū)域弃揽、右側(cè)按鈕區(qū)域脯爪。

左右兩側(cè)的按鈕區(qū)域则北，有可能由一個或多個按鈕組成，這里有只有圖標(biāo)的按鈕痕慢，只有文本的按鈕尚揣，回退按鈕，以及帶文本的回退按鈕等類型掖举。

而標(biāo)題區(qū)域快骗，也有只有文本的標(biāo)題，以及自定義視圖的標(biāo)題塔次，比如點擊后彈出下拉選擇框的標(biāo)題方篮。

使用方法

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

yarn add react-native-pure-navigation-bar
npm install --save react-native-pure-navigation-bar

在程序中使用時藕溅，直接導(dǎo)入：

import NaviBar from 'react-native-pure-navigation-bar';

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

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

可以傳遞的屬性如下：

修改自定義樣式

我們可以全局的修改，也可以臨時的修改捐友，樣式的區(qū)域鍵請參照src/style.js中的鍵名淫半。

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

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

InnerNaviBar.defaultProps.style.xxx = {
  // custom style
};

其中xxx就是src/style.js中的鍵名。

臨時修改則直接傳遞屬性到style中即可匣砖，也是同樣的按照鍵名來覆蓋科吭。

其他工具

可以通過如下方式導(dǎo)入工具：

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

其中xxx對應(yīng)如下：

樣例工程

在example目錄中有樣例代碼，只有JS部分吵护。運行方法如下：

• 進入example目錄盒音，運行yarn或者npm install；
• 繼續(xù)運行npm start馅而。
• 換一個其他位置祥诽，運行react-native init test新建一個測試工程，然后運行這個工程瓮恭，連接到之前npm start啟動的http服務(wù)器上即可雄坪。

目前支持RN 0.57.3。

最后

這個導(dǎo)航條前后耗費了很久屯蹦，才算調(diào)試的比較穩(wěn)定而且能滿足各種要求了维哈。

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

我個人在Github上還有很多react-native相關(guān)的代碼庫登澜，歡迎Star以及Follow~~

其他文章

• React Native多功能選擇頁面
• React Native拍照阔挠、從相冊選擇、錄像的實現(xiàn)
• React Native的ActionSheet實現(xiàn)
• React Native中事件監(jiān)聽和持久化存儲的結(jié)構(gòu)化設(shè)計