[React-Native] 7. StatusBar 사용하기 (앱 상태바 조작)

보통 앱들을 보면 기본 상태바를 사용하는게 드물다( 그만큼 못생겼다😂 )

그래서 프로젝트 기본 셋팅단계에서 상태바도 만져주었다.

 

React-Native에선 기본으로 StatusBar에 대한 기능을 제공해준다.

• 공식 사이트 : reactnative.dev/docs/statusbar

StatusBar · React Native

 

1. StatusBar 사용

 우선 필요한 라이브러리 import를 해주자.

import {StatusBar} from "react-native";

 

 이제, 아래와 같이 사용해서 상태바를 조작해줄 수 있다.

(구글링했을 땐 이것처럼 안 나오던데 아마 Typescript를 사용하고 있어서 이렇게 해줘야 하는 거 같다)

  StatusBar.setBackgroundColor("transparent");
  StatusBar.setTranslucent(true);
  StatusBar.setBarStyle("dark-content");

 위 코드로 상태바를 투명하게 만들고, 상태바 안의 텍스트? 내용물들을 검은색으로 설정해준다. 

 

투명한 상태바

 제대로 설정됐다면 이렇게 투명해지고 내용들도 잘 보인다!

 

2. Splash Screen일 때 상태바 조작

Splash 화면은 라이브러리로 만들어줬기 때문에 js파일에서 상태바를 못바꿔준다.

따라서 안드로이드는 아래처럼 설정해줘야 한다.

 

- android/app/src/main/res/values/styles.xml

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
	    <item name="android:windowBackground">#FFFFFF</item>
	    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

 

- MainActivity.java

...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this, R.style.SplashTheme);
        super.onCreate(savedInstanceState);
    }
...

 

이렇게 해주고 새로 프로젝트를 실행시켜주면 아래처럼 잘 적용될 걸 볼 수 있다!

             Splash 화면            (위에 상태바 내용은 있음)

 저기 오른쪽 상단에 작게 모이는 까만색 점 같은건 충전상태표시해주는 것...ㅋㅋㅋㅋ

 내용도 투명하게가 안되서 저렇게 보인다ㅜㅜ

 

 아마 Full Screen으로 되게 해주면 해결될 것 같다. 이건 다음에 하게된다면 포스팅하겠슴당😁

실행했을 땐, 제대로 적용이 안된 상태였나보다.

지금은 생태바 내용 없이 잘 보인다!