前言

RN开发页面时，基本上每一个页面我们都需要有导航栏，但是ReactNative又不像iOS那样，只要控制器包裹一个导航控制器，后面的页面就有了默认的导航栏样式，RN中的导航栏需要自己实现。当几个页面还好，我们复制粘贴也还行，但是当整个项目工程几十个页面时，每次创建导航栏我们都去复制粘贴这个也未免太low了。这时我们自定义一个高度可扩展的导航栏就势在必行了。此导航栏组件也是作者在之前开源的个人RN项目OneM中抽离出来的独立的组件。如果想查看OneM项目请点击

预览效果

navBar

导航栏组件源码地址

https://github.com/guangqiang-liu/react-native-navigator-component-demo

组件支持哪些自定义配置

• 支持自定义导航栏的样式，任意修改背景颜色，高度等
• 导航栏左按钮支持自定义icon图标，支持任意修改图标颜色和尺寸，支持自定义点击事件
• 导航栏左按钮支持自定义文本，支持任意修改文本颜色和字号，支持自定义点击事件
• 导航栏右按钮支持自定义icon图标，支持任意修改图标颜色和尺寸，支持自定义点击事件
• 导航栏右按钮支持自定义文本，支持任意修改文本颜色和字号，支持自定义点击事件
• 导航栏标题支持正标题和副标题显示等等

全部的可配置选项

const navBarConfig = {
  navigationBarProps: PropTypes.Object,
  onLeftPress: PropTypes.fun,
  onRightPress: PropTypes.fun,
  hiddenNav: PropTypes.bool,
  navBarStyle: PropTypes.Object,
  navContentStyle: PropTypes.Object,
  hiddenLeftItem: PropTypes.bool,
  leftIcon: PropTypes.Object,
  leftTitle: PropTypes.string,
  leftTitleStyle: PropTypes.Object,
  leftItemStyle: PropTypes.Object,
  titleStyle: PropTypes.Object,
  title: PropTypes.string,
  subTitleStyle: PropTypes.Object,
  subTitle: PropTypes.string,
  hiddenRightItem: PropTypes.bool,
  rightIcon: PropTypes.Object,
  rightTitle: PropTypes.string,
  rightTitleStyle: PropTypes.Object,
  rightItemStyle: PropTypes.Object
}

如何使用

• 使用自定义导航栏的页面都统一继承自BaseComponent基类组件
• 重写navigationBarProps函数，配置导航栏内容
• 重写左右按钮的点击事件onLeftPress() {}，onRightPress() {}
• 重写render函数，注意是带下划线的render函数: _render() {}

示例Demo代码

import React, { Component } from 'react'
import {BaseComponent} from './baseComponent/baseComponent'
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
});

export default class App extends BaseComponent {

  navigationBarProps() {
    return {
      title: 'APP',
      subTitle: 'subTitle',
      rightIcon: {
        name: 'rocket',
        size: 20,
        color: '#333'
      }
    }
  }

  onLeftPress() {
    alert('点击了左边的按钮')
  }
  onRightPress() {
    alert('点击了右边的按钮')
  }

  _render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

注意

项目中使用到了IconFont技术，如果想了解如何使用IconFont及自定义自己的font库，请查看作者的IconFont详细接入指南:http://www.jianshu.com/p/9f6db8e38852

总结

当我们封装了一套高度可定制的导航栏组件后，我们会发现原来开发一个页面是如此之快，这也大大的提高了代码的重用率，同时也便于后期统一的修改导航栏样式，简直是一举多得。好了，如果同学们感觉文章对你有帮助请给个 star 给个 关注 谢谢。

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！