리액트 네이티브에서 화면이 상태바 영역을 넘어가지 않게 하는 방법

핸드폰에서 상태바 영역도 화면으로 취급되기 때문에

margin 값을 주지 않으면 컴포넌트가 겹치게 되어 지저분하게 보인다.

그렇다고 일정한 margin 값을 주더라도 기기마다 상태바의 높이가 다르기 때문에

올바른 해결 방법이 될 수 없다.

 

아이폰의 경우 View 대신 SafeAreaView를 쓰면 간단히 해결할 수 있다.

그러나 안드로이드는 안 먹히기 때문에 다른 방법을 찾아야 한다.

 

이를 해결하기 위해 expo-constants를 설치하자.

npm i expo-constants

 

모듈에 있는 statusBarHeight 속성을 이용하면 기기의 상태바 높이를 구할 수 있다.

 

import Constants from 'expo-constants'; // Constants로 불러온다.

 

function App() {

    return (

        <SafeAreaView style={styles.screen}>

           /* ... */

        </SafeAreaView>

    );

}

 

const styles = StyleSheet.create({

    screen: {

        paddingTop: Constants.statusBarHeight // Constants의 statusBarHeight 값을 이용한다.

    }

});