React Native封装导航栏组件

96
光强_上海
2017.10.30 22:07* 字数 872

前言

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学习资料给大家,谢谢支持!
react-native