React Native中自定义导航条

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

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

目前支持如下功能：

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