uni-app 暗黑模式下国际化切换语言后 tabbar不生效

开发环境	版本号	项目创建方式
Windows	11	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：iOS

手机系统版本号：iOS 16

手机厂商：苹果

手机机型：iphone13

页面类型：vue

vue版本：vue3

打包方式：云端

操作步骤：

用官方提供的国际化示例：https://ext.dcloud.net.cn/plugin?id=6462

修改manifest.json文件，加入暗黑适配：

"app-plus" : {  
        "darkmode" : true,
}

再切换语言时，tabbar不生效

"tabBar": {  
        "color": "#7A7E83",  
        "selectedColor": "#007AFF",  
        "borderStyle": "black",  
        "backgroundColor": "#F8F8F8",  
        "list": [{  
                "pagePath": "pages/index/index",  
                "text": "%index.home%"  
            },  
            {  
                "pagePath": "pages/component/component",  
                "text": "%index.component%"  
            }, {  
                "pagePath": "pages/api/api",  
                "text": "%index.api%"  
            }, {  
                "pagePath": "pages/schema/schema",  
                "text": "%index.schema%"  
            }  
        ]  
    },

h691938207 1楼•7 天前

请问官方有看到这个吗？什么时候可以修复

sinazl 2楼•7 天前

大佬，请问tabbar语言弄好了吗？

yibo5220 3楼•7 天前作者

在使用 uni-app 开发时，如果在暗黑模式下切换语言后，tabbar 不生效，可能是由于以下原因导致的：

1. `tabbar` 的配置未动态更新

tabbar 的配置在页面加载时已经固定，切换语言后，如果没有动态更新 tabbar 的配置，可能会导致 tabbar 显示的语言没有变化。

解决方案： 在切换语言后，手动更新 tabbar 的配置。可以通过 uni.setTabBarItem 或 uni.setTabBarStyle 方法来动态更新 tabbar 的文本或样式。

// 示例：切换语言后更新 tabbar 的文本
uni.setTabBarItem({
  index: 0,
  text: this.$t('tabbar.home')
});

uni.setTabBarItem({
  index: 1,
  text: this.$t('tabbar.profile')
});

2. 暗黑模式下的样式未更新

暗黑模式下，tabbar 的样式可能没有根据当前语言进行更新，导致显示异常。

解决方案： 在切换语言和暗黑模式时，手动更新 tabbar 的样式。可以使用 uni.setTabBarStyle 方法来设置 tabbar 的背景色、文字颜色等。

// 示例：切换语言和暗黑模式后更新 tabbar 的样式
uni.setTabBarStyle({
  backgroundColor: this.isDarkMode ? '#333' : '#fff',
  color: this.isDarkMode ? '#fff' : '#000',
  selectedColor: this.isDarkMode ? '#ff0000' : '#007aff'
});

3. 语言切换后未重新渲染页面

如果语言切换后，页面没有重新渲染，tabbar 可能不会自动更新。

解决方案： 在切换语言后，强制页面重新渲染。可以通过 this.$forceUpdate() 来强制更新组件。

// 示例：切换语言后强制更新页面
this.$i18n.locale = newLang;
this.$forceUpdate();

4. `tabbar` 的国际化配置未正确加载

确保在 tabbar 的配置中使用了正确的国际化变量，并在切换语言后，这些变量能够正确加载。

解决方案： 检查 tabbar 的配置，确保使用了 this.$t('key') 来加载国际化文本。

// 示例：在 tabbar 配置中使用国际化
tabBar: {
  list: [
    {
      pagePath: 'pages/index/index',
      text: this.$t('tabbar.home'),
      iconPath: 'static/home.png',
      selectedIconPath: 'static/home-selected.png'
    },
    // 其他 tabbar 项
  ]
}

5. 检查 `tabbar` 的缓存问题

有时 tabbar 的缓存可能导致语言切换后不生效。

解决方案： 清除 tabbar 的缓存，或者在切换语言后重新加载页面。

// 示例：切换语言后重新加载页面
uni.reLaunch({
  url: '/pages/index/index'
});