[weex框架之eros]如何使用原生Tabbar并自定义状态栏颜色

一.环境要求:

1. eros-widget要1.0.2-beta.2及以上版本
2. eros核心框架选最新

二.eros.native.js配置

tabBar: {
        color: '#777777',
        selectedColor: '#00b4cb',
        backgroundColor: '#fafafa',
        borderColor: '#dfe1eb',
        list: [{
                pagePath: '/pages/demo/router/tabbarItem1.js',
                text: '首页',
                icon: 'bmlocal://assets/[e-mail]',
                selectedIcon: 'bmlocal://assets/[e-mail]',
                navShow: 'false',
                navTitle: ""
            },
            {
                pagePath: '/pages/demo/router/tabbarItem2.js',
                text: '联系人',
                icon: 'bmlocal://assets/[e-mail]',
                selectedIcon: 'bmlocal://assets/[e-mail]',
                navShow: 'true',
                navTitle: '联系人'
            },
            {
                pagePath: '/pages/demo/router/tabbarItem3.js',
                text: '个人中心',
                icon: 'bmlocal://assets/[e-mail]',
                selectedIcon: 'bmlocal://assets/[e-mail]',
                navShow: 'true',
                navTitle: '我'
            }
        ]
    }

注意到上面首页的navShow设置为false，即不显示导航,如果不设置，虽然官方文档有说首页默认是不显示导航的，但启用app时，进入首页时，会先显示带有“首页”的导航，然后再闪掉消息，体验非常不好。

应用tabbar并设置导航栏颜色,修改 homePage 为 tabBar,

其中

navBarColor:导航栏背景色（该处也一并把状态栏颜色也设置了，感觉是个bug）

navItemColor:导航栏文字颜色

statusBarStyle:状态栏样式（只是对文字，图标设置颜色，不是设置背景哦）

使用router跳转时

this.$router.open({
    name: 'demo',
    type: 'PUSH',
    navShow:true,
    navTitle:'导航条文案'
})

三.编辑完 eros.native.js 文件后重启服务，执行eros pack，再重新打包应用，对tabbar的修改，如果不重新打包，是不起作用的

四.如果你和我一样，在使用tabbar或router跳转时，想为状态栏设置独立颜色，那看下边吧

修改文件wxframework\eros-framework\src\main\java\com\benmu\framework\manager\impl\status\StatusBarManager.java文件

找到 setHeaderBg方法，如下

看到上面

String defaultColor = BMWXEnvironment.mPlatformConfig.getPage().getNavBarColor();

这里就是使得导航栏颜色与状态栏颜色一样的颜色