ReactNative进阶（三十六）：iPad 横屏适配_react native横屏应用(2)

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

进入功能模块时，

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

显而易见，iOS系统中当旋转物理设备至横屏时，仍然沿用的设备竖屏状态下的宽高进行页面绘制。关键问题就出在这里。

且发现在RN页面及webview中均存在横屏状态下沿用竖屏状态宽高问题。

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

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

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInt