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给我,谢谢!