StatusBarコントロール

概要

最近アプリを開発する時、StatusBarをコントロールする時がありました。このブログでリアクトネイティブ(React Native)のアプリでStatusBarをコントロールする方法をまとめます。

Splashスクリーン

私はリアクトネイティブ(React Native)でSplashスクリーンを使うためreact-native-splash-screenを使ってます。react-native-splash-screenについて詳しく内容は下記のブログを参考してください。

App Splashスクリーン

何にも設定しないと、Splashスクリーンが表示される時、StatusBarが表示します。下記のように設定するとSplashスクリーンでStatusBarを非表示することができます。

iOS

SplashスクリーンでStatusBarを日表示するため、info.plistを開いて下記のように修正します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>UIStatusBarHidden</key>
	<true/>
	<key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
    ...
</dict>
</plist>

アンドロイド

アンドロイドでSplashスクリーンが表示される時、StatusBarを非表示するためは下記のようにMainActivity.javaを修正します。

...
public class MainActivity extends ReactActivity {
...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this, true);
        super.onCreate(savedInstanceState);
    }
...
}

また、res/values/styles.xmlを下記のように修正します。

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
        <item name="android:windowFullscreen">true</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

アンドロイドで透明StatusBar

アンドロイドでStatusBarを透明にするためにはjsレベルでソースコードを修正する必要があります。StatusBarを透明にしたいコンポーネント(Component)に下記のようにソースコードを修正します。

...
import {
  ...
  StatusBar,
} from 'react-native';
...
export default class Story extends React.Component<Props, State> {
    ...
    render() {
        ...
        return (
            <React.Fragment>
                <StatusBar barStyle="dark-content" backgroundColor={'transparent'} translucent={true} />
                ...
            </React.Fragment>
        );
    }
    ...
}