한국어
[React Native] 특정 화면에서 화면 고정하기
게시: 2021년 2월 9일
reactnative
orientation
portrait
화면 고정
1. 서론
지난번과 같이 지인의 스타트업 애플리케이션을 react native로 구현하다가 생긴 일이다. 특정 화면에서만 가로 모드로 고정하고 싶어서 이것저것 오픈 소스를 살펴보다가 발견한 모듈이 바로 react-native-orientation이다. 사용법은 매우 간단하므로 아래에서 코드를 보면 이해할 수 있을 것이다.
2. 개발 환경
react-native @0.62.2
typescript @4.0.3
react-native-orientation @3.1.3
3. 구현 방법
나는 아래와 같이 특정 화면에서 가로 모드로 고정하는 코드를 작성했다. 만약 세로 모드를 고정하고 싶다면 아래의 참고 홈페이지를 방문해서 portrait와 관련된 함수를 찾으면 된다.
반드시 useEffect 내에서 return () => {}을 사용해서 이벤트들을 제거해야 한다. 그렇지 않으면 다른 페이지에서도 lock이 적용된다.
import React, { useEffect, useState } from "react";
import styled from "styled-components/native";
import Orientation from "react-native-orientation";
const Container = styled.SafeAreaView`
padding-left: 10px;
padding-right: 10px;
background-color: white;
flex: 1;
`;
const MathProblem = () => {
useEffect(() => {
Orientation.lockToLandscapeLeft();
Orientation.addOrientationListener(onOrientationDidChange);
return () => {
Orientation.unlockAllOrientations();
Orientation.removeOrientationListener(onOrientationDidChange);
};
}, []);
const onOrientationDidChange = (orientation: any) => {
if (orientation === "PORTRAIT") {
Orientation.lockToLandscapeLeft();
}
};
return <Container></Container>;
};
export default MathProblem;