[RN] react-native-orientation 화면 고정

 

react-native 화면 고정을 위해 react-native-orientation을 적용 했는데 IOS에서 동작을 안하는 문제가 발생.

react-native-orientation가 더이상 업데이트를 안해 최신 버전에는 호환이 안되는 문제인 것 같다.

그래서 react-native-orientation-locker로 변경하여 적용했다.

사용법은 react-native-orientation과 유사함

 

npm install --save react-native-orientation-locker

 

Test.js

import Orientation from 'react-native-orientation-locker';

class Test extends Component {
  componentDidMount() {
    // 화면 방향을 세로로 고정합니다.
    Orientation.lockToPortrait();
  }

  componentWillUnmount() {
    // 컴포넌트가 해제될 때 화면 방향 잠금을 해제합니다.
    Orientation.unlockAllOrientations();
  }
  
  ....
}
  export default Test;

---

Android 추가 설정

MainActivity.java

import android.content.Intent;
import android.content.res.Configuration;

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    this.sendBroadcast(intent);
}

 

MainApplication.java

import org.wonday.orientation.OrientationActivityLifecycle;

@Override
public void onCreate() {
	...
    
    registerActivityLifecycleCallbacks(OrientationActivityLifecycle.getInstance());
    
    ...
}

 

 

IOS 추가 설정

AppDelegate.m

#import <Orientation.h>

...

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return [Orientation getOrientation];
}

@end

 

 

참고 사이트 

https://github.com/wonday/react-native-orientation-locker

GitHub - wonday/react-native-orientation-locker: A react-native module that can listen on orientation changing of device, get cu