[React Native] 리액트 네이티브 - 상태바(Status Bar) 설정 하기

안녕하세요.

 

이번 시간에는 React Native 상태바에 대해서 알아보도록 하겠습니다.

 

상태바는 흔히 우리가 핸드폰에 맨 상단에 배터리, 와이파이, 알람 등 상태가 표시되는 화면이라고 생각하시면 됩니다.

 

기존에 React Native를 사용하시면 상태표시바가 겹쳐 보이게 됩니다.

 

해결 방법은 marginTop 조정하면 됩니다. 하지만 고정하면 폰의 기종마다 상태바의 크기가 달라져 문제가 됩니다.

 

그럼 marginTop 높이를 설정하는 2가지 방법에 대해서 알아보도록 하겠습니다.

 

첫번째 방법이 안된다고 생각하시면 두번째 방법으로 진행하시면 됩니다.

 

어렵지 않고 간단합니다.

 

첫번째 방법

 

라이브러리 설치

$ npm install --save react-native-status-bar-height

(Package Site: https://www.npmjs.com/package/react-native-status-bar-height)

 

코드 삽입

npm 라이브러리를 설치 하셨으니 <SafeAreaView>에 스타일을 지정해 주시면 자동으로 높이를 계산하게 됩니다.

import React from "react";
import { SafeAreaView, StyleSheet, View, Text} from "react-native";
import { getStatusBarHeight } from "react-native-status-bar-height";
import { StatusBar } from "expo-status-bar";

function App() {
    return (
        <SafeAreaView style={styles.container}>
           <Text>Test</Text>
           <StatusBar style="auto" />
        </SafeAreaView>
    );
}

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

---

 

두번째 방법

 

라이브러리 설치

$ npm i expo-constants

 

코드 삽입

import React from "react";
import { SafeAreaView, StyleSheet, View, Text} from "react-native";
import Constants from 'expo-constants';
import { StatusBar } from "expo-status-bar";

function App() {
    return (
        <SafeAreaView style={styles.container}>
           <Text>Test</Text>
           <StatusBar style="auto" />
        </SafeAreaView>
    );
}

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

 

수고하셨습니다.