ReactNative进阶（三十六）：iPad横屏适配

文章目录

- 一、前言
- 二、实现思路
- 三、延伸阅读
- 四、拓展阅读

一、前言

应用RN技术栈实现APP上线后，业务部门领导会上反馈未实现ipad横屏全屏展示，用户体验较差。由此，一场pad横屏全屏展示的APP调优工作由此开展。

二、实现思路

时间紧任务重，技术实现上，考虑到存量功能代码改造工作量，RN层面对于横屏改造工作量较大，故RN层面整体实现横屏展示时间上不允许，RN侧改造方案放弃。

由于业务方只关注APP某一功能模块，故将改造范围缩减，当业务方点击APP功能模块入口时，允许APP解除屏幕方向锁定，让屏幕方向根据设备的物理方向自动调整。当应用退出当前关注功能模块时，APP屏幕方向锁定，不允许屏幕方向根据设备的物理方向自动调整。

实现代码如下：
安装步骤：

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

进入功能模块时，

import Orientation from 'react-native-orientation';onPress={() => {// 解除屏幕方向锁定，让屏幕方向根据设备的物理方向自动调整console.log('----------解除屏幕方向锁定，让屏幕方向根据设备的物理方向自动调整---------');Orientation.unlockAllOrientations();....
}}

退出功能模块时，

import Orientation from 'react-native-orientation';initData = () => {// 锁定屏幕竖屏锁定console.log('----------锁定屏幕竖屏锁定---------');Orientation.lockToPortrait();
};

按照以上实现思路实施后，发现android系统下的pad表现较好，能够按照预期设想自动实现APP横竖屏切换，且内容适配。

但是，iOS系统下的iPad表现不尽如人意，虽然可以实现屏幕横竖屏自动切换，但是当APP处于横屏状态下时，页面展示效果存在未完全铺展开的适配问题。

按照网上给出的解决方案：

对于iOS，在ios/Info.plist文件中包括以下行就可以了：

<key>UISupportedInterfaceOrientations</key>
<array><string>UIInterfaceOrientationPortrait</string>
</array><key>UISupportedInterfaceOrientations~ipad</key>
<array><string>UIInterfaceOrientationLandscapeRight</string><string>UIInterfaceOrientationLandscapeLeft</string><string>UIInterfaceOrientationPortrait</string><string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>

经实践发现问题依旧存在。

三、延伸阅读

react-native-orientation 组件可用函数如下：

lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
lockToLandscapeRight()
unlockAllOrientations()
getOrientation(function(err, orientation) 返回的结果有 LANDSCAPE、 PORTRAIT、 UNKNOWN 、PORTRAITUPSIDEDOWN ；
getSpecificOrientation(function(err, specificOrientation) 返回的结果有 LANDSCAPE-LEFT 、LANDSCAPE-RIGHT、 PORTRAIT 、UNKNOWN 、PORTRAITUPSIDEDOWN；