[React Native] 상태바 색상, 상태바 글자색, 상태바 영역 조절하기

상태바(상단바)란?

스마트폰에서 시간, 배터리 잔량, 시스템 상태, 각종 알림 등을 표시하는 상단에 위치한 바

상태바 (상단바)

안드로이드에서는 상태바의 색상, 글자색 등을 제어할 수 있다고 한다. (아이폰은 불가능하다고 한다.)

 

상태바를 제어하기 위해서는 먼저 리액트 네이티브의 'StatusBar'를 import 해야 한다.

import { StatusBar } from 'react-native';

위 코드로 StatusBar를 import 하면 된다.

 

상태바 색상 변경하기

기본 상태바

위 상태바의 색을 흰색으로 바꾸고 싶다면?

StatusBar.setBackgroundColor("white");

위 코드를 추가하면 상태바의 배경색이 흰색이 된다.

상태바 배경색 흰색으로 변경

상태바의 배경색은 흰색이 되었지만 글자도 흰색이라 글자가 잘 보이지 않는 것을 볼 수 있다.

(다행히 충전중이라 번개표시 정도는 보인다..)

 

이 경우 StatusBar의 setBarStyle 함수를 이용하여 상태바의 글자색을 변경할 수 있다.

StatusBar.setBarStyle('dark-content');

상태바 글자색이 어둡게 바뀜

"dark-content"로 하면 상태바의 글자 색이 어두운 색이 되고,

"light-content"로 하면 상태바의 글자 색이 밝은 색이 된다.

 

아래와 같이 배경이 검은색인 경우

StatusBar.setBarStyle('light-content');

위 코드로 상태바의 글자색을 밝게 바꾸면

이렇게 글자색이 밝아져 상태바의 글자를 잘 알아볼 수 있다.