[React Native] Expo 라이브러리를 사용하여 상태바 표시하기

※ 이 포스트는 클래스형 컴포넌트를 기준으로 작성되었다.

1. 왜 필요한가?

Expo를 활용하여 웹뷰 앱을 개발하고 테스트를 하던 중 앱을 실행하면 모바일의 상태바가 사라지는 현상을 발견하였다. 사용자가 앱을 사용하는 중 배터리 상태나 알림 및 시간 확인 등을 하기 위해 앱에서 상태바가 표시되도록 해보았다.

2. 과정

expo 프로젝트 내에서 제공하는 expo-status-bar 라이브러리를 활용하면 쉽게 상태바를 표시할 수가 있다.

3. 결과

다음의 명령어를 명령 프롬프트에 입력하여 라이브러리를 설치한다.

npx expo install expo-status-bar

설치가 완료되면 해당 라이브러리를 포함시킨다.

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

다음의 코드를 return에 추가하면 상태바가 표시된다.

<StatusBar style="light" />

예제 코드는 다음과 같다.

import React from "react";
import Constants from "expo-constants";
import { StatusBar } from "expo-status-bar";
import { WebView } from "react-native-webview";
import { View, StyleSheet } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar style="light" />
        <WebView source={{ uri: "https://www.naver.com" }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    paddingTop: Constants.statusBarHeight,
  },
});