[React Native] StatusBar (react-native, expo-status-bar)

StatusBar (react-native, expo-status-bar)

들어가며

• 리액트 네이티브(React Native)의 @StatusBar@와 엑스포(Expo)의 @expo-status-bar@에  대해 간단히 정리해본다.

 

StatusBar (React Native)

개념

• 상단 상태 표시줄(시간, 배터리, 신호 등)의 스타일, 배경색, 표시 여부 등을 제어할 수 있는 React Native 내장 컴포넌트

 

사용 방법

import { StatusBar } from 'react-native';

export default function App() {
  return (
    <>
      <StatusBar barStyle="light-content" />
    </>
  );
}

 

주요 속성

속성	설명	플랫폼
@barStyle@	- 텍스트 색상 설정 ▶ @default@ : 플랫폼별 기본 색상 (iOS : dark, Android : light) ▶ @light-content@ : 흰색 아이콘/글자 ▶ @dark-content@ : 검정색 아이콘/글자	iOS/Android
@backgroundColor@	상태바 배경색 설정	Android
@hidden@	상태바 숨김 여부	iOS/Android
@translucent@	투명하게 만들기 (배경이 콘텐츠에 겹치도록)	Android
@animated@	스타일 변경 시 애니메이션 적용 여부	iOS/Android
@networkActivityIndicatorVisible@	- 네트워크 아이콘 표시 여부  - 구버전 iOS 전용	iOS (deprecated)
@showHideTransition@	- 상태바 숨김 시 전환 애니메이션 ▶@fade@, @slide@	iOS

 

배경색 설정하기 (Android 전용)

<StatusBar
  barStyle="light-content"
  backgroundColor="#6a51ae"
/>

 

⇒ iOS는 배경색을 바꾸려면 추가 설정(@SafeAreaView@ 등)이 필요하다.

 

전체화면 레이아웃과 함께 사용하기

/App.js

import { StatusBar, SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'black' }}>
      <StatusBar barStyle="light-content" backgroundColor="black" />
      {/* 앱 UI */}
    </SafeAreaView>
  );
}

 

⇒ @SafeAreaView@와 함께 사용하면 iOS에서도 안정적인 UI 배치가 가능하다.

 

상태바 숨기기 / 다시 보이게 하기

<StatusBar hidden={true} /> // 숨기기
<StatusBar hidden={false} /> // 다시 보이기

 

• 또는 다음과 같이 동적으로 변경되게 할 수 있다.

useEffect(() => {
  StatusBar.setHidden(true, 'slide');
}, []);

 

 

상태바 동적 제어 (함수형 API)

• 다음과 같이 메서드를 이용하여 동적으로 상태바를 제어할 수 있다.

StatusBar.setBarStyle(style, animated)
StatusBar.setBackgroundColor(color, animated)
StatusBar.setHidden(hidden, animationType)

 

사용 예제

StatusBar.setBarStyle('light-content', true);
StatusBar.setBackgroundColor('#000000', true);
StatusBar.setHidden(true, 'slide');

 

사용 예시

목표	설정 방법
글자/아이콘 색상 지정	<StatusBar barStyle="light-content" />
상태바 배경색 지정	<StatusBar backgroundColor="#000" /> (Android만 사용 가능)
숨기기	<StatusBar hidden={true} />
배경 겹치게 만들기	<StatusBar translucent={true} /> (Android만 사용 가능)
동적 제어	StatusBar.setBarStyle(...)

 

expo-status-bar

개념

• Expo 환경 전용의 상태 표시줄(StatusBar) 관리 컴포넌트
• React Native 내장 @StatusBar@보다 더 간편하게 설정할 수 있다.
• Expo 프로젝트 생성 시 기본으로 포함되어 있어 따로 설치할 필요가 없다.
• 플랫폼(iOS/Android)에 상관 없이 단순하게 UI 제어가 가능하다.

 

설치

• Expo 프로젝트에서는 기본으로 포함되어 있어 별도로 설치하지 않아도 되지만, 필요할 경우 아래의 명령을 실행하여 명시적으로 설치할 수 있다.

$ expo install expo-status-bar

 

사용 방법

• 보통 프로젝트의 최상단 컴포넌트(루트 컴포넌트, @App.js@)에 추가해준다.
• 여러 화면(Screen)에서 상태바 스타일이 바뀌어야 한다면, 각 화면에서 @<StatusBar />@를 개별적으로 적용할 수 있다.

 

/App.js

import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <>
      <StatusBar style="light" />
    </>
  );
}

 

주요 속성

속성	설명	예시
@style@	상태바 텍스트/아이콘 색	@"auto"@, @"light"@, @"dark"@
@backgroundColor@	상태바 배경색 (Android에서만 적용)	@"#000"@
@translucent@	상태바를 투명하게	@true@ or @false@
@hidden@	상태바 숨김 여부	@true@ or @false@
@animated@	변경 시 애니메이션 적용	@true@ or @false@

 

사용 예시

목표	설정 방법
상태바 스타일 제어	<StatusBar style="light" />
숨기기	<StatusBar hidden={true} />
배경색 지정 (Android 전용)	<StatusBar backgroundColor="#000" />
투명 처리 (Android 전용)	<StatusBar translucent={true} />
자동 모드	<StatusBar style="auto" />

 

앱 전반적으로 어두운 테마를 쓴다면 @style="light"@ 속성을 사용하고, 밝은 테마라면 @style="dark"@ 속성을 사용한다. 

@style="auto"@ 속성을 사용하면 배경에 따라 자동으로 @light@ 또는 @dark@가 결정된다. 

 

 

참고 사이트

StatusBar · React Native

StatusBar - Expo Documentation