안녕하세요. 개발을 하다가 보면 상태 바 때문에 글씨가 겹쳐서 안 보이는 경우를 겪으신 적 있으신가요?
폰의 기종마다 상태 바의 크기가 달라 marginTop의 값을 몇을 주어야 할지 고민이죠..
그래서 오늘은 상태 바의 높이 값을 구하는 방법을 포스팅해보겠습니다.
(문제의 스크린샷)
먼저 라이브러리를 설치해줍니다.
$ npm install --save react-native-status-bar-height# OR$ yarn add react-native-status-bar-height
import { getStatusBarHeight } from "react-native-status-bar-height";
console.log("상태바 높이 ", getStatusBarHeight());
// 스마트폰 마다 다른 상태바의 높이를 가져올 수 있습니다.
이후 console을 창을 확인해 보면
(터미널 스크린샷)
갤럭시 S10의 경우 상태 바의 높이 값이 24인 것을 확인하실 수 있습니다.
const styles = StyleSheet.create({
container: {
marginTop: getStatusBarHeight()
}
});
(css 스크린샷)
감사합니다
'ReactNative > 개발' 카테고리의 다른 글
| [React Native]-Sticky (0) | 2019.11.24 |
|---|---|
| [React Native]-Scroll To (0) | 2019.11.24 |
| [React Native]-import 절대경로 설정 방법 (2) | 2019.11.17 |
