React Native中自定义导航条

96
smartshallot
1.3 2018.10.29 00:06* 字数 1037

这是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>
  );
}

可以传递的属性如下:

属性名 描述
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 回退按钮的标识,用于在leftElementrightElement中传递,表示这一项是回退按钮
GOBACK_IMAGE 回退按钮的默认图片
forceInset 用于SafeAreaViewforceInset属性,直接用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~~

其他文章

React Native