浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】iOSがダークモードの時にステータスバーが見えなくなる

今回は、React Native で iOS がダークモードの場合にステータスバーが見えなくなる現象の対応についてです。
以前、「【React Native】iOSでダークモードを強制的に禁止にする」という記事で、ダークモードでステータスバーが見えなくなったらダークモードを禁止にすることで対応していましたが、今回は、ダークモードを有効にしつつ、ステータスバーが見えなくなる現象を解決していきます。

今回使用するのは、React Native の <StatusBar> コンポーネントです。
公式ドキュメントはこちらから。

StatusBar · React Native
https://reactnative.dev/docs/statusbar

 

こちらのコンポーネントを使うと、ステータスバーの背景色やテキストの色を設定することができます。
サンプルコードは下記のとおりです。

import { StatusBar, Platform } from 'react-native';

<StatusBar
  barStyle={ Platform.OS === 'android' ? 'default' : 'dark-content' } />

今回は、背景色は設定せずに白色のまま、文字だけを黒くしています。
なお、Android の場合には設定を反映させないように、Platform を使って、Android、iOS ごとに barStyle の値を変更しています。
設定は以上です。

上記の設定で実行したところ、iOS はステータスバーの背景色が白色で、文字が黒色で表示されました。
Android は変更なしで、上記を追加する以前のままの見た目で表示されました。
なお、もし背景色を黒色などの暗い色合いにする場合は、barStylelight-content を設定すれば、文字色が白くなります。
アプリのデザインによって使い分けるようにしてください。

 

以上、React Native で、iOS がダークモードの時にステータスバーが見えなくなる現象の対処方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)