[react-native] SafeAreaView의 높이를 어케 구할까?(ios)

아이폰 x 이후 모델은 디스플레이 상단에 노치가 있다

 

개발을 하는데 있어서 노치를 신경 안쓰다가

자칫 잘못하면 기껏 만들어 놓은 ui가 가려 질 수있다

 

왜냐하면 기본적인 height는 노치와 하단 

home indicator를 포함한 높이기 때문에 사용 범위 보다 크게잡히기 때문이다

 

 

그래서 SafeAreaView를 사용하게 되는데

 

나같은 경우 컨테이너의 크기가 자꾸 safearea보다 작아지길래 강제로 높이 설정을 해주었다

내 실력탓이다

 

그치만 잘 해결됐다 알아보자

 

---

먼저 스크린의 크기를 구해 보자

 

Dimension을 import

import {
  Dimensions,
} from 'react-native';

 

스크린의 높이와 너비를 알 수 있다

let ScreenWidth = Dimensions.get('window').width,    //screen 너비
let ScreenHeight = Dimensions.get('window').height   //height 높이

 

 

이제 노치(status bar)와 하단 home indicator 부분을 차례대로 빼 주면 온전한 SafeArea 크기가 나온다

 

 

모듈 install

npm install --save react-native-status-bar-height   //상단 상태바(노치 부분)

github.com/ovr/react-native-status-bar-height

 

npm i react-native-iphone-x-helper --save     //하단 home indicator

github.com/ptelad/react-native-iphone-x-helper

 

 

 

getStatusBarHeight() : status bar height 반환

getBottomSpace() : home indicator height 반환

let screenHeight = Dimensions.get('window').height - getStatusBarHeight()- getBottomSpace();

 

 

위와 같이스크린 크기에서 빼주면 SafeAreaView높이가 나온다

 

---

 

컨테이너 크기가 이상해서 height:  SafeAreaView크기로 하니까 잘됐다

 

 

 

 

 

 

 

 

 

 

참고: medium.com/@hckcksrl/react-native%EC%97%90%EC%84%9C-safeareaview%EC%9D%98-height-%EA%B5%AC%ED%95%98%EA%B8%B0-3f04c06597be