react-native-orientation 实现IOS某个页面强制横屏

react-native-orientation github地址：react-native-orientation ;

安装步骤：

npm i --save react-native-orientation
react-native link react-native-orientation (自动link不成功，建议手动link)

使用方法：

在某个component引入 import Orientation from 'react-native-orientation‘

某个页面强制横屏：

componentWillMount() {
          Orientation.lockToLandscapeRight();
          //Orientation.lockToLandscape();
          //Orientation.lockToLandscapeLeft();
}

那么问题来了，如果系统屏蔽横屏以上设置不起作用，该怎么解决？

如图这两个选项取消勾选，Orientation.lockToLandscape() 不起作用

landscape.png

这个时候我们需要在ios内做一些修改：
1.打开xcode找到默认的AppDelegate.m文件

AppDelegate.m.png

2.在文件头部引入Orientation.h文件

Orientation.h.png

#import "Orientation.h"

3.添加以下代码后重新build，运行即可

Orientation.png

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

你会发现APP不会随设备横屏而横屏，但是在设置了Orientation.lockToLandscape()的地方会横屏。

如果有什么疑问，请在下方留言一起讨论