The default safe area color of uniapp is white. If we make an immersive page and the background color is also white, we won’t be able to see the color of the battery bar, etc. How to modify it?
First, let's talk about the bottom safe area
The picture below is the original state of the bottom safe area, which feels out of place with the entire page
Modify the code to configure safearea
- manifest.json (the following code only supports ios)
// 在app-plus下配置：
"safearea": { //安全区域配置，仅iOS平台生效
"background": "#F5F6F9", //安全区域外的背景颜色，默认值为"#FFFFFF"
"bottom": { // 底部安全区域配置
"offset": "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"
}
},
- manifest.json (the code below supports android)
写法一：
// #ifdef APP-PLUS
var Color = plus.android.importClass("android.graphics.Color");
plus.android.importClass("android.view.Window");
var mainActivity = plus.android.runtimeMainActivity();
var window_android = mainActivity.getWindow();
window_android.setNavigationBarColor(Color.parseColor("#eb8c76"));
// #endif
写法二：
// #ifdef APP-PLUS
let color, ac, c2int, win;
color = plus.android.newObject("android.graphics.Color")
ac = plus.android.runtimeMainActivity();
c2int = plus.android.invoke(color, "parseColor", "#000000")
win = plus.android.invoke(ac, "getWindow");
plus.android.invoke(win, "setNavigationBarColor", c2int)
// #endif
The color of the bottom area has been configured successfully (the picture below is for reference only, the color chosen randomly is a bit ugly haha)
Next, let’s talk about the configuration of the top battery bar.
Configure top navigation bar color
Solution 1: Only applicable to native navigation configuration, non-custom navigation
Modify the navigationBarTextStyle property of the page that needs to be configured in page.json
"pages": [
{
"path": "pages/index/index",
"style": {
// "navigationStyle": "custom"
"navigationBarTitleText": "我是原生title",
"navigationBarTextStyle": "white" ,// 仅支持 black/white
"navigationBarBackgroundColor": "#aaaaff"
}
}
],
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-yAzbkfR8-1677942313817)(https://img2023.cnblogs.com/blog/1675284/202303/1675284-20230304224849591 -1728658694.png)]
Option 1: Universal, also suitable for custom navigation
Use nativejs api in the page, native is the built-in sdk of uni, you don’t need to import it manually, you can use it directly, but you need to pay attention to the timing and conditions of the call, refer to the following precautions
onReady(){
plus.navigator.setStatusBarStyle("dark"); //只支持dark和light
}
Precautions
Pay attention to the calling timing of the function. If it is a custom navigation bar, the method is only written in onReady. After switching the route and coming back, your configuration will become invalid, so pay attention to the calling timing
The difference between onReady, onLoad, and onShow in uniapp
-
onReady The initial rendering of the page is completed, but after the rendering is completed, you send a request to obtain data, which seems a bit slow
-
onLoad only loads once, monitors page loading, its parameter is the data passed on the previous page, and the parameter type is Object
-
onShow Monitor page display. Triggered every time a page appears, including returning from a subordinate page to reveal the current page
At present, I configure it like this (for example: configure the background color of the top navigation bar to be black)
import { onLoad, onShow, onReady} from '@dcloudio/uni-app';
onReady(() => {
/* #ifdef APP-PLUS */
plus.navigator.setStatusBarStyle('dark');
/* #endif */
});
onShow(() => {
/* #ifdef APP-PLUS */
plus.navigator.setStatusBarStyle('dark');
/* #endif */
});
I will write here today~
- Friends, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~
- Everyone be happy every day
Everyone is welcome to point out where the article needs to be corrected~
Learning is endless, cooperation is win-win
