StatusBar 다루기

2019-05-23

RN(React Native)에서 StatusBar를 다루는 방법에 대해서 설명합니다.

개요

최근 앱을 개발할 때, StatusBar를 다루게 되었습니다. 이 블로그에서는 RN(React Native)에서 StatusBar를 다루는 방법에 대해서 정리합니다.

Splash 스크린

저는 RN(React Native)에서 Splash 스크린을 다루기 위해 react-native-splash-screen을 사용하고 있습니다. react-native-splash-screen에 대한 자세한 내용은 아래의 블로그를 참고하시기 바랍니다.

아무 설정도 하지 않은 경우, 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>
        );
    }
    ...
}

위와 같이 RN(React Native)의 StatusBar를 사용하여 backgroundColor={'transparent'}translucent={true}를 설정하면 투명 배경의 StatusBar를 사용할 수 있습니다.

완료

지금까지 RN(React Native)를 사용하여 개발한 앱내에서 StatusBar를 다루는 방법에 대해서 알아보았습니다. 위에서 알아본 내용 이외에도 StatusBar를 다루게 된다면 이 블로그에 추가하도록 하겠습니다.

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
스무디 한 잔 마시며 끝내는 React Native React Native로 실전 스마트폰 앱 만들기
Buy me a coffeeBuy me a coffee
Posts