Easy is Perfect

[React Native/RN] 기기 화면 해상도/사이즈 얻는 방법, Dimensions.get('window')와 Dimensions.get('screen')의 차이점

  • melonicedlatte
  • Feb 15, 2023


1. Problem

React Native/RN(리액트 네이티브) 에서 개발을 진행하다 보면 기기 화면 사이즈를 얻어야 하는 경우가 생깁니다. 모바일 기기의 해상도를 얻기 위해서 어떤 방법을 사용해야 할까요? React Native/RN(리액트 네이티브) 에서 제공하는 API 로 손쉽게 해당 값을 얻어올 수 있습니다.

2. Solution

Dimensions.get() 를 사용하면 화면 사이즈/해상도를 얻어올 수 있습니다. get의 값으로 ‘window’ 와 ‘screen’ 이 들어갈 수 있는데요.

// StatusBar를 제외한 영역의 사이즈 on Android
Dimensions.get('window')

// StatusBar를 포함한 영역의 사이즈 on Android
Dimensions.get('screen')

IOS 는 두 값을 넣은 데이터가 동일하고, Android 의 경우에는 Statusbar 를 포함하는지 제외하는지의 차이점을 가지고 있습니다. window's height < screen's height 의 값을 가지고 있습니다. StatusBar(상태바) 만큼 더 큰 값을 얻을 수 있습니다. 아래의 그림에 표현된 것만큼 차이가 나는 것입니다!

image

읽어주셔서 감사합니다! 좋은 하루 되세요!

reference

  • https://stackoverflow.com/questions/44978804/whats-the-difference-between-window-and-screen-in-the-dimensions-api
  • https://reactnative.dev/docs/dimensions



Search