리액트 네이티브] 12. SafeAreaView와 StatusBar

앱을 만들 때, 화면 전체의 뷰를 일반 뷰로 만들면 생기는 문제가 있다.

 

(테마 뷰와 루트 뷰 코드)

- App.js

import App from "./src/App";

export default App;

 

- ../src/theme.js

export const theme = {
    background: '#101010',
    itemBackground: '#313131',
    main: '#778bdd',
    text: '#cfcfcf',
    done: '#61161',
};

 

- ../src/App.js

import React from "react";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme"

const Container = styled.View`
    flex: 1;
    background-color: ${({ theme }) => theme.background };
    align-items: center;
    justify-content: flex-start;
`;

const Title = styled.Text`
    font-size: 40px;
    font-weight: 600;
    color: ${({ theme }) => theme.main };
    align-self: flex-start;
    margin: 0px 20px;
`;

export default function App() {
    return (
        <ThemeProvider theme = {theme}>
            <Container>
                <Title>TODO List</Title>
            </Container>
        </ThemeProvider>
    );
}

 

이렇게 위 상태창에 뷰가 씹혀있는(??) 모습을 볼 수 있다.

이 때 노치를 해결해 줄 수 있는 뷰가 SafeAreaView이다.

 

- ../src/App.js

...

const Container = styled.SafeAreaView`
    flex: 1;
    background-color: ${({ theme }) => theme.background };
    align-items: center;
    justify-content: flex-start;
`;

...

 

View를 SafeAreaView로 변경하면

자세히 보면 위의 노치만큼 내려와있는게 보인다.

근데 문제는 안드로이드는 노치라는 개념이 없어서 그런가(?) 아직 SafeAreaView 를 적용한다 해서 상태창에 씹혀있는 것을 볼 수 있는데,

이를 해결하는 방법이 StatusBar이다.

 

 

- ../src/App.js

import React from "react";
import { StatusBar } from "react-native";
import styled, { ThemeProvider } from "styled-components/native";
import { theme } from "./theme"

...

export default function App() {
    return (
        <ThemeProvider theme = {theme}>
            <Container>
                <StatusBar
                    barStyle= "light-content"
                    backgroundColor={ theme.background }
                />
                <Title>TODO List</Title>
            </Container>
        </ThemeProvider>
    );
}

 

루트뷰 내부에 StatusBar를 넣는다.

배경컬러과 barStyle을 조절할 수 있는데, 배경색이야 그렇다 치고.. barStyle이 생소하다.

light-content, dark-content, default 세 가지 속성값이 있는데, light 는 밝은 글씨색과 상태창 아이콘, dark는 어두운 글씨색과 상태창 아이콘, default는 기본값이다.

 

테마 백그라운드 컬러가 #101010이므로 밝은 컬러로 지정했다.

결과를 보자.

 

안드로이드의 상태창만큼 뷰가 내려간 것도 보이는 것 뿐만 아니라 아이폰 역시 상태창의 글씨 색이 달라진 것이 보인다.