ReactNative项目分享(3)导航栏的实现

RN原生提供导航栏的库感觉还可以只是不符合我们使用习惯,还好实现起来并不太难。这次我就抽空做了一个比较适合我们使用习惯的导航栏。
github地址:https://github.com/sitting2002/react-native-navibar

效果图如下:

  • 总共四部分
    1、左边按钮组
    2、标题
    3、右边按钮组
    4、状态栏部分

左右按钮组可以提供文字以及图片,对应属性如下:(右边按钮组同样)

 * --LeftButtonGroup--
 * @props leftTextBtn1
 * @props leftTextBtn1Color
 * @props leftImgBtn1
 * @props leftBtn1Action
 * 
 * @props leftTextBtn2
 * @props leftTextBtn2Color
 * @props leftImgBtn2
 * @props leftBtn2Action

标题对应属性

 * --TitleView--
 * @props title
 * @props titleClickAction
 * @props titleTextColor
 * @props titleImg

更多属性请参见github

⚠️注意:
本地图片直接使用即可,网络图片记得带上uri

const NaviBackIcon = require('./Images/navi_back.png');  
const webImg = 'https://static.ring.com/assets/static/fb-9609b1bfce739af883fa03a396743761.png';
leftImgBtn1 = {NaviBackIcon}
leftImgBtn2 = {{uri: webImg}}

介绍到这里了,希望能帮助大家。如发现bug请提issues给我,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,269评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,229评论 4 61
  • 本文简要地介绍了现代密码学的一些基础理论,供参考。 1 加密技术概述 一个密码系统的安全性只在于密钥的保密性,而不...
    徐州风清扬阅读 380评论 0 0
  • 今天心情郁闷, 因为工作,心里真的不愤。 一说再说, 还是犯错! 还是咽下这口气, 还是坚持努力! 放宽心态,放宽...
    3fd25a0a9f73阅读 167评论 0 0