3.1.3 StatusBar 색상 바꾸기

지금까지 만든 앱을 시뮬레이터에서 실행하면 iOS에서는 화면의 최상단 상태 영역이 흰색으로 보일 것입니다(그림 3-3 참고). 그리고 안드로이드에서는 다음과 같이 상태 영역이 회색으로 보일 것입니다.

▲ 그림 3-11 안드로이드의 회색 StatusBar

이 상태 영역을 StatusBar라고 부릅니다. 이번에는 StatusBar의 색상을 DateHead와 일치하는 색상으로 설정하겠습니다. iOS에서 구현하는 방법과 안드로이드에서 구현하는 방법이 약간 다른데요. 우선 안드로이드의 StatusBar 색상을 변경해보겠습니다.

DateHead 컴포넌트에서 StatusBar 컴포넌트를 다음과 같이 설정해보세요.

components/DateHead.js

import React from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';

function DateHead({date}) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return (
    <>
    <StatusBar backgroundColor="#26a69a" />
      <View style={styles.block}>
        <Text style={styles.dateText}>
          {year}년 {month}월 {day}일
        </Text>
      </View>
    </>
  );
}

(...)