[React Native] 에뮬레이터 디바이스 자동 회전 기능 켜는 방법 (Expo)

에뮬레이터 디바이스 자동 회전 기능 켜는 방법 (Expo)

들어가며

• 리액트 네이티브(React Native) 엑스포(Expo) 프로젝트를 에뮬레이터로 실행할 때, 디바이스 자동 회전 기능을 켜는 방법을 간단히 정리해본다.

 

방법

(1) 애플리케이션 설정 파일(app.json) orientation 키 값 변경하기

• 프로젝트 최상단 경로에 있는 애플리케이션 설정 파일(@app.json@)의 @orientation@ 키의 값을 다음과 같이 @default@로 설정해준다.

 

/app.json

{
  "expo": {
    "name": "section-02",
    "slug": "section-02",
    "version": "1.0.0",
    "orientation": "default",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "splash": {
      "image": "./assets/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": ["expo-font"]
  }
}

 

(참고) orientation 속성

• @app.json@ 파일의 @orientation@ 키의 값은 다음과 같이 3가지를 지정할 수 있다.

속성값	설명
@default@	디바이스 화면 자동 회전 허용
@portrait@	디바이스 화면 세로 모드 고정 (디바이스 회전 시 세로 모드 고정)
@landscape@	디바이스 화면 가로 모드 고정 (디바이스 회전 시 가로 모드 고정)

 

(2) 앱 재시작 하기

• 애플리케이션 설정 파일 (@app.json@)을 수정한 후, 변경된 내용을 적용하려면 앱을 재시작(Reload)해야 한다. 
• 엑스포(Expo) 프로젝트에서는 터미널에서 간단히 @[R]@ 키를 눌러서 강제로 앱을 재시작시킬 수 있다.

 

(3) 자동 회전 기능 켜기 (에뮬레이터의 디바이스)

• 그리고 에뮬레이터의 디바이스에서 자동 회전 기능을 켜준다.

자동 회전 기능을 켜준 모습 (Android)

 

참고 사이트

app.json / app.config.js