[React-Native] 리액트 네이티브 Dimensions (화면 크기 구하기)

1. Dimensions

보통 현재 화면의 가로, 세로 길이를 구할 때 사용한다.

import {Dimensions} from 'react-native';

// 현재 앱이 표시되는 창의 크기를 반환하며 상태 바 및 네비게이션 바를 제외
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const {width, height} = Dimensions.get('window'); 

//장치 전체 화면 크기를 반환
const screenWidth = Dimensions.get('screen').width;
const screenHeight = Dimensions.get('screen').height;

const {width, height} = Dimensions.get('screen');

 

다음과 같은 데이터를 얻을 수 있다.

{
  width: number,    // 화면의 너비
  height: number,   // 화면의 높이
  scale: number,    // 장치의 화면 스케일 (픽셀 밀도)
  fontScale: number // 텍스트의 크기 조정 비율
}

 

아래와 같이 화면 크기가 변할 때 감지 할 수 있다.

Dimensions.addEventListener('change', ({window, screen}) => {
	// 내용 기입
});

// 다음과 같은 형식이다.
addEventListener(type: 'change', handler:({window, screen}: DimensionsValue) => void,
: EmitterSubscription); // EmitterSubscription 은 구독 객체를 의미