id: dimensions title: Dimensions

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

tsx

import {Dimensions} from 'react-native';

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

tsx

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

Dimensions는 즉시 사용할 수 있지만, 디바이스 회전이나 폴더블 디바이스 등으로 인해 변경될 수 있다. 따라서 이 값에 의존하는 렌더링 로직이나 스타일은 매 렌더링 시마다 이 함수를 호출해야 한다. 값을 캐싱하기보다는(예: 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 크기는 상태 표시줄(투명하지 않은 경우)과 하단 네비게이션 바의 크기를 제외한 값을 반환한다.

타입 정의

DimensionsValue

속성:

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

ScaledSize

타입
객체

속성:

이름	타입
width	숫자
height	숫자
scale	숫자
fontScale	숫자