今回は、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 は変更なしで、上記を追加する以前のままの見た目で表示されました。
なお、もし背景色を黒色などの暗い色合いにする場合は、barStyle に light-content を設定すれば、文字色が白くなります。
アプリのデザインによって使い分けるようにしてください。
以上、React Native で、iOS がダークモードの時にステータスバーが見えなくなる現象の対処方法についてでした。
ご参考になれば幸いです。
