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

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

效果图如下:

ReactNative项目分享(3)导航栏的实现_第1张图片
  • 总共四部分
    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给我,谢谢!

你可能感兴趣的:(ReactNative项目分享(3)导航栏的实现)