はじめに

NativeScript(NativeScript-Vue) で iOS の Status Bar の情報(時刻、電池量など)が表示されない場合の対応方法。

TL;DR

  • app/App_Resources/iOS/Info.plist で UIViewControllerBasedStatusBarAppearance を false に設定
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 問題内容
    2. 対応方法
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.4
BuildVersion:	19E287

$ node -v
v12.7.0

$ npm -v
6.10.3

$ tns --version
6.4.0

$ grep -C1 version package.json
"tns-android": {
  "version": "6.4.1"
},
"tns-ios": {
  "version": "6.4.2"
}

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────┐
│ Plugin                        │ Version │
│ @nativescript/theme           │ ^2.2.1  │
│ @vue/devtools                 │ ^5.0.6  │
│ nativescript-socketio         │ ^3.2.1  │
│ nativescript-toasty           │ ^1.3.0  │
│ nativescript-vue              │ ^2.4.0  │
│ nativescript-vue-devtools     │ ^1.2.0  │
│ tns-core-modules              │ ^6.0.0  │
│ vuex                          │ ^3.1.1  │
└───────────────────────────────┴─────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

詳細

問題内容

単純にフォントが白くなっているのだと思うが、以下のように Status Bar の情報(時刻、電池量など)が表示されない状態になっていた。

対応方法

参考: Changing Status Bar Style in iOS - NativeScript Docs

上記を見ると色々と書かれているが、自分の環境では app/App_Resources/iOS/Info.plist の UIViewControllerBasedStatusBarAppearance を true に変更することで解決した。

app/App_Resources/iOS/Info.plist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 ...
 <plist version="1.0">
 <dict>
   ...
   <key>UIStatusBarStyle</key>
   <string>UIStatusBarStyleLightContent</string>
   <key>UIUserInterfaceStyle</key>
   <string>Light</string>
   <key>UIViewControllerBasedStatusBarAppearance</key>
-  <false/>
+  <true/>
   ...
 </dict>
 </plist>

A Boolean value indicating whether the status bar appearance is based on the style preferred for the current view controller.
ステータスバーの外観が現在のビューコントローラーに適したスタイルに基づいているかどうかを示すブール値。
※UIViewControllerBasedStatusBarAppearance - Information Property List | Apple Developer Documentation より引用

まとめ

  • app/App_Resources/iOS/Info.plist で UIViewControllerBasedStatusBarAppearance を false に設定

その他・メモ

Status Bar の設定については、別途ちゃんと学習予定。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list