Zenn
🎴

NativeScript-VueでiOSのStatus Bar背景色を強引に変える

2020/11/18に公開
NativeScript
Vue.js
tech

動機


iOSのstatus barの背景を黒にしたいが、ステータスバー以外の背景色は白にしたい。

公式ドキュメントを読めばわかること

NativeScriptでは直接ステータスバーの色を変更することはできない。できることは公式のドキュメントに列挙されている。

時刻やキャリアなど内容を白くするには

app/App_Resources/iOS/Info.plistの最後の方にUIStatusBarStyleをLightに指定すればよい。これは以下の方法を用いる場合でも共通。

背景色を変えるには

  1. デフォルトのActionBarを利用している場合、ActionBarの色を変えるだけでよく比較的簡単に実装できる。<ActionBar backgroundColor="green">とすればよい。
  2. ActionBarを利用していない場合、<Page>にbackgroundSpanUnderStatusBar="true" backgroundColor="red"を追加すればそのbackgroundColorになる。

問題

私がいま取り組んでいるプロジェクトではデフォルトのActionBarを利用していないので、2.の方法を使う必要がある。<Page>でbackgroundColor="black"を指定しても、その直下のレイアウト要素(GridLayoutやStackLayoutのたぐい）でbackgroundColor="white"などとすると、「ん？アンタPageでblackを指定してるけど、結局直下のレンダリングする必要のあるものの色はwhiteなのね？じゃあblackではなくwhiteをstatusbarのunderにspanするよ、アンタが指定したとおりにね」と白になってしまう。

解決

最初にレンダリングされる要素の背景が黒であればそれをステータスバーに引き伸ばしてくれるようなので、強引に1pxの高さの黒背景エレメントをビューの一番上にかませることで解決した。

<Page
    actionBarHidden="true"
    backgroundSpanUnderStatusBar="true"
  >
    <StackLayout class="ArticleDetails">
      <Label text=" " class="ArticleDetails__pseudo-before" />
      <GridLayout
        class="ArticleDetails__inner"
      >

とした。

styleでは以下のように指定した：

<style lang="scss" scoped>
.ArticleDetails {
  background-color: black;
  &__pseudo-before {
    color: black;
    background-color: black;
    height: 1px;
  }
  &__inner {
    background-color: white;
  }

<Label text=" " class="ArticleDetails__pseudo-before" />が強引に追加した1pxの高さの要素で、テキストは適当にスペースを入れ、これの背景色を黒に指定する。文字色も一応blackを指定した。

この<Label>なしで<StackLayout>の背景色を黒に指定しても、直下の<GridLayout>の背景色を白にしてもうまくいかない。また<StackLayout>を省略して<Label>と<GridLayout>を同列にしてもうまくいかない。もう少し簡単に書ける気がするのだが、ひとまず見た目は想定通りになったので当面はこれでやってみる。

any help is appreciated

nativescript-statusbarというプラグインで直接dark色を選べるようになるようなのだが、NS7にアップグレードしたばかりだしこれ以上プラグイン増やすのもな…と思い試さなかった。もしかするとこれでうまくやれるのかもしれない。怠惰。

強引すぎるのでもっと賢い方法を知っている方は教えて下さい。

GitHubで編集を提案

Discussion