uniapp怎么改變底部安全區(qū)和頂部手機(jī)信號(hào)時(shí)間電池欄顏色

本篇內(nèi)容介紹了“uniapp怎么改變底部安全區(qū)和頂部手機(jī)信號(hào)時(shí)間電池欄顏色”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

原始狀態(tài)

下圖是底部安全區(qū)原始狀態(tài)，感覺和整個(gè)頁(yè)面格格不入

修改代碼配置safearea

• manifest.json（下面代碼僅支持ios）

// 在app-plus下配置：
"safearea": { //安全區(qū)域配置，僅iOS平臺(tái)生效    
    "background": "#F5F6F9", //安全區(qū)域外的背景顏色，默認(rèn)值為"#FFFFFF"    
    "bottom": { // 底部安全區(qū)域配置    
        "offset": "none|auto" // 底部安全區(qū)域偏移，"none"表示不空出安全區(qū)域，"auto"自動(dòng)計(jì)算空出安全區(qū)域，默認(rèn)值為"none"    
    }  
},

• manifest.json（下面代碼支持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

底部區(qū)域顏色配置

底部區(qū)域顏色已配置成功（下圖僅供參考，隨便選的顏色，有點(diǎn)丑哈哈）

頂部電池欄的配置

配置頂部導(dǎo)航欄顏色

方案一：僅適用于原生導(dǎo)航配置，非自定義導(dǎo)航

在page.json修改需要配置的頁(yè)面的navigationBarTextStyle屬性

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				// "navigationStyle": "custom"
				"navigationBarTitleText": "我是原生title",
				"navigationBarTextStyle": "white" ,// 僅支持 black/white
				"navigationBarBackgroundColor": "#aaaaff"
			}
		}
	],

方案一：通用，也適用于自定義導(dǎo)航

在頁(yè)面中使用nativejs的api，native是uni內(nèi)置的sdk，不需要手動(dòng)引入，直接用就可以,但是需要注意調(diào)用時(shí)機(jī)和條件使用，參考下面的注意事項(xiàng)哦

onReady(){
	    plus.navigator.setStatusBarStyle("dark"); //只支持dark和light
	}

注意事項(xiàng)

注意函數(shù)的調(diào)用時(shí)機(jī)，如果是自定義導(dǎo)航欄，方法只寫在onReady的話，切換路由再回來以后，你的配置會(huì)失效，所以要注意調(diào)用時(shí)機(jī)

uniapp中 onReady, onLoad, onShow區(qū)別

• onReady 頁(yè)面初次渲染完成了，但是渲染完成了，你才發(fā)送請(qǐng)求獲取數(shù)據(jù)，顯得有些慢

• onLoad 只加載一次，監(jiān)聽頁(yè)面加載，其參數(shù)為上個(gè)頁(yè)面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為Object

• onShow 監(jiān)聽頁(yè)面顯示。頁(yè)面每次出現(xiàn)都觸發(fā)，包括從下級(jí)頁(yè)面點(diǎn)返回露出當(dāng)前頁(yè)面

舉個(gè)栗子

目前我是這樣配置（舉個(gè)栗子：配置頂部導(dǎo)航欄背景顏色為黑色）

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 */
});

“uniapp怎么改變底部安全區(qū)和頂部手機(jī)信號(hào)時(shí)間電池欄顏色”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！