uniapp のデフォルトのセーフエリアの色は白ですが、没入型のページを作成して背景色も白にすると、バッテリーバーなどの色が見えなくなります。
まず、ボトムセーフエリアについて話しましょう
下の写真は下のセーフエリアの元の状態で、ページ全体に違和感があります
コードを変更してセーフエリアを構成する
- manifest.json (次のコードは ios のみをサポートしています)
// 在app-plus下配置：
"safearea": { //安全区域配置，仅iOS平台生效
"background": "#F5F6F9", //安全区域外的背景颜色，默认值为"#FFFFFF"
"bottom": { // 底部安全区域配置
"offset": "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"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
下部領域の色が正常に構成されました (下の図は参考用です。ランダムに選択された色は少し醜い笑)
次に、上部バッテリーバーの構成について説明しましょう。
トップ ナビゲーション バーの色を構成する
解決策 1: ネイティブ ナビゲーション構成、非カスタム ナビゲーションにのみ適用可能
page.json で構成する必要があるページの navigationBarTextStyle プロパティを変更します。
"pages": [
{
"path": "pages/index/index",
"style": {
// "navigationStyle": "custom"
"navigationBarTitleText": "我是原生title",
"navigationBarTextStyle": "white" ,// 仅支持 black/white
"navigationBarBackgroundColor": "#aaaaff"
}
}
],
[外部リンクの画像転送に失敗しました。ソース サイトにはリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-yAzbkfR8-1677942313817)(https://img2023.cnblogs.com/blog/1675284 /202303/1675284-20230304224849591-1728658694.png)]
オプション 1: ユニバーサル、カスタム ナビゲーションにも適しています
ページ内でnativejs apiを利用、nativeはuniの組み込みsdk、手動でインポートする必要はなく、直接利用できるが、呼び出しのタイミングと条件に注意が必要、参照以下の注意事項
onReady(){
plus.navigator.setStatusBarStyle("dark"); //只支持dark和light
}
予防
関数の呼び出しタイミングに注意 カスタムナビゲーションバーの場合はonReadyにしかメソッドを書かない ルートを切り替えて戻ってくると設定が無効になるので呼び出すタイミングに注意
uniapp の onReady、onLoad、onShow の違い
-
onReady ページの最初のレンダリングは完了していますが、レンダリングが完了した後で、データを取得するリクエストを送信すると、少し遅いように見えます
-
onLoad は 1 回だけ読み込まれ、ページの読み込みを監視します。そのパラメーターは前のページで渡されたデータであり、パラメーターの型は Object です。
-
onShow モニターのページ表示。下位ページから戻って現在のページを表示するなど、ページが表示されるたびにトリガーされます
現在、私はこのように設定しています（例：トップナビゲーションバーの背景色を黒に設定）
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 */
});
今日はここに書きます〜
- 友よ (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ また明日～～
- みんなが毎日幸せに
記事を修正する必要がある場所を誰でも指摘してください〜
学習は無限であり、協力はウィンウィンです
