React Native纯JS实现的自定义导航条



  • 这是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~~