uni-app iPhone tabBar 无缘无故变黑色背景了

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app iPhone tabBar 无缘无故变黑色背景了

示例代码：

{
    "tabBar": {
        "color": "#555555",
        "selectedColor": "#F67A32",
        "backgroundColor": "#FFFFFF",
        "spacing": "6px",
        "height": "56px",
        "iconfontSrc": "/static/extend-iconfont/iconfont.ttf",
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconfont": {
                    "fontSize": "22px",
                    "color": "#333333",
                    "text": "\ue69d",
                    "selectedColor": "#F67A32",
                    "selectedText": "\ue69d"
                }
            },
            {
                "pagePath": "pages/work/work",
                "text": "办公",
                "backgroundColorTop": "#F1F1F1",
                "backgroundColorBottom": "#FFFFFF",
                "iconfont": {
                    "fontSize": "22px",
                    "color": "#333333",
                    "text": "\ue647",
                    "selectedColor": "#F67A32",
                    "selectedText": "\ue647"
                }
            },
            {
                "pagePath": "pages/approve/approve",
                "text": "审批",
                "backgroundColorTop": "#F1F1F1",
                "backgroundColorBottom": "#FFFFFF",
                "iconfont": {
                    "fontSize": "22px",
                    "color": "#333333",
                    "text": "\ue61a",
                    "selectedColor": "#F67A32",
                    "selectedText": "\ue61a"
                }
            },
            {
                "pagePath": "pages/user/user",
                "text": "我的",
                "backgroundColorTop": "#F1F1F1",
                "backgroundColorBottom": "#FFFFFF",
                "iconfont": {
                    "fontSize": "22px",
                    "color": "#333333",
                    "text": "\ued21",
                    "selectedColor": "#F67A32",
                    "selectedText": "\ued21"
                }
            }
        ]
    }
}

操作步骤：

  • 直接打包

预期结果：

  • 应该是白色背景才对

实际结果：

  • 黑色背景

bug描述：

在pages.json中设置的tabBar的"backgroundColor": “#FFFFFF”，但是打包后tabBar的背景色是黑色的，手机是没有开启暗黑模式的

信息类别 详情
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 14.1.1 (23B81)
HBuilderX类型 正式
HBuilderX版本 4.24
手机系统 iOS
手机系统版本 iOS 18
手机厂商 苹果
手机机型 iPhone 15
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX
App下载地址 https://apps.apple.com/cn/app/栖牛oas/id6642648983

Harmonyos Next教程
9 回复

你好，之前没有发现过类似的问题，你是打包之后有这个问题吗？本地开发时呢？


之前的版本没问题，Android版本也没有这个问题，HBuilderX现在也完全识别不到Mac的模拟器，一直都用的真机在调试，之前一直都没这个问题

回复 东坡小胖: 你尝试在插件中，把真机运行，打包的插件卸载之后重新安装一下试试

回复 DCloud_UNI_yuhe: 你是指原生插件，还是App的模块？

回复 东坡小胖: 是HX的

回复 DCloud_UNI_yuhe: 你是说App卸载了，重新打包后安装么？

回复 东坡小胖: 是HbuilderX的

回复 DCloud_UNI_yuhe: 噢噢，我没那么操作，今天后面重新又打包了几次，又好了。

在uni-app中遇到iPhone设备上的tabBar背景无缘无故变为黑色的问题，这通常可能是由于样式冲突、系统主题变化或代码配置错误导致的。以下是一些排查和修正此问题的代码示例和方法，重点在于检查和调整tabBar的样式配置。

1. 检查pages.json配置

首先，确保pages.json中关于tabBar的配置是正确的。特别是tabBar的color、selectedColor、backgroundColor等属性。

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icon_home.png",
        "selectedIconPath": "static/icon_home_active.png"
      },
      // 其他tab项...
    ]
  }
}

确保backgroundColor设置为期望的颜色，这里设置为白色#ffffff。

2. 样式覆盖

如果pages.json中的配置未能解决问题，可以尝试通过自定义样式覆盖默认样式。在App.vue或相关页面中加入如下样式：

<style>
/* 针对iOS平台特定样式调整 */
@media only screen and (platform: ios) {
  .uni-tab-bar__bd {
    background-color: #ffffff !important; /* 强制覆盖背景色 */
  }
}
</style>

注意，使用!important可以确保样式优先级，但应谨慎使用以避免其他样式冲突。

3. 动态设置样式

如果问题依旧存在，可以考虑在App启动时根据平台动态设置tabBar样式。在main.js或App.vue的onLaunch生命周期中：

if (uni.getSystemInfoSync().platform === 'ios') {
  uni.setTabBarStyle({
    backgroundColor: '#ffffff',
    color: '#7A7E83',
    selectedColor: '#3cc51f'
  });
}

4. 检查系统主题

iOS设备支持暗黑模式，确保应用没有意外地跟随系统主题变化。可以在pages.json或代码中明确指定颜色模式，或监听系统主题变化做相应调整。

结论

通过上述步骤，你应该能够定位并解决uni-app在iPhone上tabBar背景变为黑色的问题。重点检查配置文件、样式覆盖、动态设置以及系统主题的影响。如果问题依旧，建议详细检查是否有其他代码或第三方插件影响了tabBar的样式。

回到顶部