React-Native width, height 판별하여 가로, 세로 모드 적용

구현하려고 한 방식은 테블릿은 가로, 세로모드가 모두 적용이 되어야 하고, 일반 스마트폰은 세로모드만 적용이 가능하도록 구현을 하려고 했음.

• 일단 import Orientation from 'react-native-orientation-locker'; 이 라이브러리를 install 해야된다.
• const window = Dimensions.get('window');

const 테블릿 = () => { // 테블릿인지 아닌지 판별하기 위해 구현
let aspectRatio = window.height / window.width;
return window.width > 500 && aspectRatio < 1.6;
};

useEffect(() => {
const 테블릿을 판별하기위한 변수 = 테블릿();

if (테블릿을 판별하기위한 변수) {
  Orientation.unlockAllOrientations(); // 테블릿 가로, 세로 회전을 허용
}
else {
  Orientation.lockToPortrait(); // 인치가 작은 스마트폰 세로모드로 고정
}

return () => {
  Orientation.unlockAllOrientations(); // 컴포넌트 언마운트 시 방향 설정 초기화
};

}, []);

처음에는 이런 예제를 찾아보았는데 예제가 하나도 없어서 width와 height값으로 판별을 해보았고, 이런식으로 구현을 해주었더니 편리하게 사용할 수 있었다.