这是2017年年初开始的公司的项目，对于导航条的要求很高，Android和iOS上必须用一致的UI，按钮位置还有各种颜色都有要求，而且要适应各种奇葩要求。

尝试了一下当时React Native自带的导航，完全不符合要求，于是自己手写了一个导航。

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

目前支持如下功能：

• 横屏和竖屏模式。
• 安全区域支持。
• 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>
  );
}

可以传递的属性如下：

修改自定义样式

我们可以全局的修改，也可以临时的修改，样式的区域键请参照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对应如下：

样例工程

在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~~

其他文章

• React Native多功能选择页面
• React Native拍照、从相册选择、录像的实现
• React Native的ActionSheet实现
• React Native中事件监听和持久化存储的结构化设计