[React-Native] 세로 모드 고정 (화면 회전 막기, 가로 모드 막기)

🟡 화면 회전이 안되게 하고 싶어요!

서비스하고 싶은 어플이 세로 모드만 되게 개발했는데, 화면 회전을 하면서 UI가 깨지거나 버그가 발생하는 경우가 있습니다.

이를 막기 위해서, RN 기준으로 화면 회전을 막는 방법을 공유하려고 합니다.

 

🟡 IOS📱

1. ios/.../Info.plist 파일 오픈

2. 아래와 같이 설정을 추가

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

 

🟡  Android 🤖

1. android/app/src/main/AndroidManifest.xml 파일 오픈

2. 아래와 같이 설정을 추가

<activity
    android:name=".MainActivity"
    android:screenOrientation="portrait"
    ...>
    ...
</activity>

 

위 코드들을 수정해 주고, 어플을 재시작하면 화면 회전이 고정됩니다.

 

🟡 만약 제품환경에서는 화면 회전을 막지만, 디버그 모드에서는 화면 회전을 하고 싶다면?

🟣 IOS

1.  Info.plist 파일에 위에서 추가한 코드 삭제하기

2. AppDelegate.m 파일 오픈 후 코드 추가

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  #ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  #endif

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"YourAppName"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  return YES;
}

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  #ifdef DEBUG
    return UIInterfaceOrientationMaskAll;
  #else
    return UIInterfaceOrientationMaskPortrait;
  #endif
}

@end

 

🟣 Android

1. AndroidManifest.xml 파일에 위에서 추가한 코드 삭제

2. MainActivity.java 오픈 후 수정

package com.yourapp;

import com.facebook.react.ReactActivity;
import android.content.pm.ActivityInfo;
import android.os.Bundle;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "YourAppName";
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (BuildConfig.DEBUG) {
      setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_FULL_SENSOR);
    } else {
      setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }
  }
}

 

 

📝 정리 

1. 세로 모드로 고정하고 싶으면 아래 코드를 수정

2. ios -> Info.plist 수정

3. android -> AndroidManifest.xml 수정

4. 디버그 모드와 실제 모드를 나눠서 컨트롤할 경우 수정해야 할 곳이 다름

 

 

글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~