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

作者: DecadeChan | 来源:发表于2017-03-09 20:36 被阅读198次

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

    相关文章

      网友评论

        本文标题:ReactNative项目分享(3)导航栏的实现

        本文链接:https://www.haomeiwen.com/subject/hasggttx.html