[React Native] Native 모듈의 뷰 방향 제어 방법

3단계

수정 AppDelegate.h/AppDelegate.m

업데이트 방향을 쉽게 만들기 위해 AppUtility.swift 만들기

ReactNative에 대한 보기 위치 수정

1단계: AppDelegate 수정

AppDelegate.h

// add property
@property (nonatomic, assign) UIInterfaceOrientationMask orientationLock;

AppDelegate.m

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window
{
  return _orientationLock;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{ ...
// default value
_orientationLock = UIInterfaceOrientationMaskPortrait; 
...
}

2단계: AppUtility.swift 생성

struct AppUtility {
  static func lockOrientation(_ orientation: UIInterfaceOrientationMask) {
    if let delegate = UIApplication.shared.delegate as? AppDelegate {
      delegate.orientationLock = orientation
    }
  }

  /// OPTIONAL Added method to adjust lock and rotate to the desired orientation
  static func lockOrientation(_ orientation: UIInterfaceOrientationMask, andRotateTo rotateOrientation:UIInterfaceOrientation) {
    self.lockOrientation(orientation)

    UIDevice.current.setValue(rotateOrientation.rawValue, forKey: "orientation")
    UINavigationController.attemptRotationToDeviceOrientation()
  }
}

3단계: ReactNative에 대한 보기 위치 수정
방향을 업데이트하면 뷰의 위치가 잘못된 위치로 이동합니다. 따라서 발생했을 때 이 함수를 호출합니다.

private func fixViewPosition() {
    // Wait 0.1 sec and fix position.
    // It wont be fixed position in some case, so fix twice with 0.1 sec delay for that wired bug.
    DispatchQueue.main.asyncAfter(deadline: .now()+0.1) { [self] in
      let fixedPosition = CGPoint(x: -UIScreen.main.bounds.midX + targetView.bounds.midX, y: -UIScreen.main.bounds.midY + targetView.bounds.midY)
      view.bounds.origin = fixedPosition
      DispatchQueue.main.asyncAfter(deadline: .now()+0.1) { [self] in view.bounds.origin = fixedPosition }
    }
  }