useWindowDimensions는 리액트 컴포넌트에서 권장하는 API다. Dimensions와 달리 윈도우 크기가 변경될 때마다 자동으로 업데이트된다. 이는 리액트 패러다임과 잘 어울린다.

tsx

import {Dimensions} from 'react-native';

다음 코드를 사용해 애플리케이션 윈도우의 너비와 높이를 가져올 수 있다:

tsx

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

윈도우 크기는 바로 사용할 수 있지만, 기기 회전이나 폴더블 디바이스 등으로 인해 변경될 수 있다. 따라서 이 값에 의존하는 렌더링 로직이나 스타일은 매 렌더링 시마다 이 함수를 호출해야 한다. 값을 캐싱하지 말고, 예를 들어 StyleSheet에 값을 설정하는 대신 인라인 스타일을 사용하는 것이 좋다.

폴더블 디바이스나 화면 크기 또는 앱 윈도우 크기가 변경될 수 있는 디바이스를 대상으로 한다면, 아래 예제와 같이 Dimensions 모듈의 이벤트 리스너를 사용할 수 있다.

참조

메서드

addEventListener()

tsx

static addEventListener(
  type: 'change',
  handler: ({
    window,
    screen,
  }: DimensionsValue) => void,
): EmitterSubscription;

이벤트 핸들러를 추가한다. 지원하는 이벤트는 다음과 같다:

• change: Dimensions 객체 내부의 속성이 변경될 때 발생한다. 이벤트 핸들러의 인자는 DimensionsValue 타입 객체이다.

get()

tsx

static get(dim: 'window' | 'screen'): ScaledSize;

초기 화면 크기 정보는 runApplication이 호출되기 전에 설정된다. 따라서 다른 모듈을 불러오기 전에도 이 정보를 사용할 수 있다. 하지만 나중에 업데이트될 가능성이 있다.

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

인자:

이름	타입	설명
dim 필수	string	set을 호출할 때 정의한 화면 크기 이름. 해당 크기 값을 반환한다.

안드로이드에서 window 크기는 status bar(투명하지 않은 경우)와 bottom navigation bar의 크기를 제외한 값을 반환한다.

타입 정의

DimensionsValue

속성:

이름	타입	설명
window	ScaledSize	애플리케이션 윈도우의 가시적 크기.
screen	ScaledSize	기기 화면의 크기.

스케일된 크기(ScaledSize)

타입
object

속성:

이름	타입
width	number
height	number
scale	number
fontScale	number