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

最新推荐文章于 2025-05-15 21:28:39 发布

fenfeng2012

最新推荐文章于 2025-05-15 21:28:39 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： weex/eros 移动开发文章标签： android week

本文链接：https://blog.youkuaiyun.com/fenfeng2012/article/details/81712261

移动开发同时被 2 个专栏收录

14 篇文章

订阅专栏

weex/eros

8 篇文章

订阅专栏

本文详细介绍了在Eros框架中配置TabBar的具体步骤，包括环境要求、配置项说明及常见问题解决方法，如首页导航隐藏、状态栏颜色设置等，适用于希望优化用户体验的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.环境要求:

eros-widget要1.0.2-beta.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/TabBar_Item1@2x.png',
                selectedIcon: 'bmlocal://assets/TabBar_Item1_Selected@2x.png',
                navShow: 'false',
                navTitle: ""
            },
            {
                pagePath: '/pages/demo/router/tabbarItem2.js',
                text: '联系人',
                icon: 'bmlocal://assets/TabBar_Item2@2x.png',
                selectedIcon: 'bmlocal://assets/TabBar_Item2_Selected@2x.png',
                navShow: 'true',
                navTitle: '联系人'
            },
            {
                pagePath: '/pages/demo/router/tabbarItem3.js',
                text: '个人中心',
                icon: 'bmlocal://assets/TabBar_Item3@2x.png',
                selectedIcon: 'bmlocal://assets/TabBar_Item3_Selected@2x.png',
                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();

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