핸드폰의 화면 회전에 따라 레이아웃을 다르게 만드는 방법

리액트 네이티브에서 핸드폰을 90도로 돌렸을 때 레이아웃이 달라지도록 설정하면

화면이 좌우로 길어져서 모양이 다 망가진다.

때문에 핸드폰을 세로로 놓았을 때와 가로로 놓았을 때의 경우를 둘 다 처리해줘야 한다.

 

이를 위해 핸드폰의 방향이 바뀌었을 때 호출되는 함수가 필요한데

useDeviceOrientation() 훅스를 쓰면 아래의 객체를 리턴해서

핸드폰의 놓인 상태에 따라 레이아웃을 다르게 표현해줄 수 있다.

 

{

    landscape: false,

    portrait: true

}

 

이 훅스를 쓰려면 다음 모듈을 설치해야 한다.

npm i @react-native-community/hooks

 

아래처럼 추가해서 쓸 수 있다.

 

import { useDimensions, useDeviceOrientation } from '@react-native-community/hooks';

// useDimensions() 훅스를 쓰면 현재 화면의 전체 크기가 어떤지 알 수 있다. 

// 리액트 네이티브에서 기본적으로 제공하는 Dimesions.get('screen')을 쓸 수도 있지만

// 화면이 회전할 때 업데이트 되지는 않는다.

 

export default function App () {

    const { landscape } = useDeviceOrientation();

    // landscape에 따라서 style을 달리 적용한다.

    /* ... */

}

 

이 모듈에서 다양한 훅스를 쓸 수 있으니 아래 링크를 참고하자.

https://www.npmjs.com/package/@react-native-community/hooks