关于rn项目的横竖屏切换（Android&IOS）

rn项目中有时候会用到横屏竖屏的切换，或者设定项目为指定的横屏或者竖屏，话不多说上来就整：

1.先说默认不去横屏

android端

android文件下app/src/main/AndroidManifest.xml
添加
android:screenOrientation\="portrait"
值得注意的是需要在activity中添加并且是在属性为android:name=".MainActivity"下添加如图：

IOS端

a.在Xcode项目中把相对应的勾去掉即可

b.我遇到过在iponeX以上的手机这样打包后，仍然会去横屏，比如你系统调成横屏，然后点击app启动的场景尤其是利用rn的Dimensions属性

`var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;
console.log(deviceWidth,deviceHeight,'获取宽高')`
会造成高变成宽，宽变成了高，获取的数据变成横屏的数据
要在app启动的时候就设置成不能横屏，
我在appdelegate.m添加如下代码：
//禁止全局横屏

-(UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
   
    return UIInterfaceOrientationMaskPortrait;//默认全局不支持横屏
}

2.在app中有时候需要指定页面去做横屏或者竖屏，原生上就是写桥接了暴露出接口，如果不会给你一个很好用的组件

react-native-orientation

eact-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()的地方会横屏。

作者：zjiaxin
链接：https://www.jianshu.com/p/c16...
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

。。。。
以上参考这几位的笔记
https://blog.csdn.net/weixin_...
https://my.oschina.net/liuchu...
https://www.jianshu.com/p/f93...
https://www.jianshu.com/p/df0...