HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色
HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色
操作步骤:
- 版本更新到4.84之后重新制作自定义基座就变了
预期结果:
- 底部安全区域颜色跟标准基座相同
实际结果:
- 底部安全区域变成黑色了
bug描述:
- 代码没有变更为啥重新打包后 底部安全区域变成黑色了?
- 图1 是标准基座
- 图2 是自定义基座
图片

信息表
| 信息项 | 值 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC操作系统版本 | Windows 11 家庭中文版 23H2 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 4.85 |
| 手机系统 | Android |
| 手机系统版本 | Android 16 |
| 手机厂商 | OPPO |
| 手机机型 | OPPO Find X8 |
| 页面类型 | vue |
| Vue版本 | vue3 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于HBuilder X更新到4.84之后重新制作uni-app自定义基座底部安全区域变成黑色的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的HBuilderX 4.84版本更新后引入的问题。在Android平台,自定义基座的底部安全区域默认背景色被错误地设置为黑色,而非跟随页面背景色。
解决方案:
在pages.json中配置全局样式,显式设置安全区域背景色:
{
"globalStyle": {
"safeArea": {
"bottom": {
"offset": "auto",
"background": "#FFFFFF" // 改为你的页面背景色
}
}
}
}
或者针对特定页面配置:
{
"pages": [
{
"path": "pages/index/index",
"style": {
"safeArea": {
"bottom": {
"background": "#FFFFFF"
}
}
}
}
]
}

