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>UIInterfaceOrientationLandscapeRight</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>

经实践发现问题依旧存在。且存在整个APP应用横竖屏切换时，样式错乱（竖屏状态应用横屏样式，遮挡）问题。

经过控制台日志分析发现如下兼容性提示信息：

> [Orientation] BUG IN CLIENT OF UIKIT: Setting UIDevice.orientation is not supported. Please use UIWindowScene.requestGeometryUpdate(_:)

在 iOS 16 中，通过设置 UIDevice.orientation 来强制旋转屏幕的方向已不再被支持。
根据错误提示，需要使用 UIWindowScene.requestGeometryUpdate(_:) 方法来实现。

转为 iOS 15.2.1测试机后，发现以上兼容性提示信息在控制台不再展示。
但是竖屏转横屏后，依旧存在样式错乱（竖屏状态应用横屏样式，遮挡）问题。

经过项目实践，发现组件react-native-orientation对于iOS系统横竖屏转换支持并不友好，也有可能自己遗漏了xcode配置。

三、延伸阅读

3.1 iOS 原生实现横竖屏切换

3.1.1 iOS16 之前实现横竖屏切换

在 AppDelegate.h 文件中添加一个变量来记录是否需要进行横竖屏切换。

@property (nonatomic, assign, getter=isLaunchScreen) BOOL launchScreen;    /\*\*< 是否是横屏 \*/

在 AppDelegate.m 文件中重写 launchScreen 的 setter 方法：

- (void)setLaunchScreen:(BOOL)launchScreen {

    _launchScreen = launchScreen;
    [self application:[UIApplication sharedApplication] supportedInterfaceOrientationsForWindow:nil];
}

并且实现 UIApplicationDelegate 的 application:supportedInterfaceOrientationsForWindow: 方法

- (UIInterfaceOrientationMask)application:(UIApplication \*)application supportedInterfaceOrientationsForWindow:(UIWindow \*)window {

    if (self.isLaunchScreen) {
        // 只支持横屏，并且 Home 按键在右边
        return UIInterfaceOrientationMaskLandscapeRight;
    }

    // 只支持竖屏
    return UIInterfaceOrientationMaskPortrait;
}

接下来在需要切换横竖屏的 View 中增加以下方法，就能在 iOS16 之前实现该功能。

/// 切换设备方向
/// - Parameter isLaunchScreen: 是否是全屏
- (void)p_switchOrientationWithLaunchScreen:(BOOL)isLaunchScreen {
    AppDelegate \*appdelegate = (AppDelegate \*)[UIApplication sharedApplication].delegate;
    if (isLaunchScreen) {
        // 全屏操作
        appdelegate.launchScreen = YES;
    } else {
        // 退出全屏操作
        appdelegate.launchScreen = NO;
    }
    // 设置设备的方向
    [self p_swichToNewOrientation:isLaunchScreen ? UIInterfaceOrientationLandscapeRight : UIInterfaceOrientationPortrait];
}

/// iOS16 之前进行横竖屏切换方式
/// - Parameter interfaceOrientation: 需要切换的方向
- (void)p_swichToNewOrientation:(UIInterfaceOrientation)interfaceOrientation {
    NSNumber \*orientationTarget = [NSNumber numberWithInteger:interfaceOrientation];
    [[UIDevice currentDevice] setValue:orientationTarget forKey:@"orientation"];
}

经过以上代码，就能实现在 iOS16 之前的设备上进行横竖屏切换，下面开始适配 iOS16 的横竖屏切换。

3.1.2 iOS16 之后实现横竖屏切换

跟 iOS16 之前方式一样，需要设置 launchScreen 标志变量，重写 launchScreen 的 setter 方法，实现 UIApplicationDelegate 的 application:supportedInterfaceOrientationsForWindow: 方法。

在Xcode 14下，需要实现横竖屏切换的 View p_switchOrientationWithLaunchScreen: 方法中增加 iOS16 适配。

/// 切换设备方向
/// - Parameter isLaunchScreen: 是否是全屏
- (void)p_switchOrientationWithLaunchScreen:(BOOL)isLaunchScreen {

    AppDelegate \*appdelegate = (AppDelegate \*)[UIApplication sharedApplication].delegate;
    if (isLaunchScreen) {
        // 全屏操作
        appdelegate.launchScreen = YES;
    } else {
        // 退出全屏操作
        appdelegate.launchScreen = NO;
    }

    if (@available(iOS 16.0, \*)) {
        // setNeedsUpdateOfSupportedInterfaceOrientations 方法是 UIViewController 的方法，所以这个操作最好是放在控制器中去操作
        [self setNeedsUpdateOfSupportedInterfaceOrientations];
        NSArray \*array = [[[UIApplication sharedApplication] connectedScenes] allObjects];
        UIWindowScene \*scene = [array firstObject];
        // 屏幕方向
        UIInterfaceOrientationMask orientation = isLaunchScreen ? UIInterfaceOrientationMaskLandscapeRight : UIInterfaceOrientationMaskPortrait;
        UIWindowSceneGeometryPreferencesIOS \*geometryPreferencesIOS = [[UIWindowSceneGeometryPreferencesIOS alloc] initWithInterfaceOrientations:orientation];
        // 开始切换
        [scene requestGeometryUpdateWithPreferences:geometryPreferencesIOS errorHandler:^(NSError \* _Nonnull error) {
            NSLog(@"强制%@错误:%@", isLaunchScreen ? @"横屏" : @"竖屏", error);
        }];
    } else {
        [self p_swichToNewOrientation:isLaunchScreen ? UIInterfaceOrientationLandscapeRight : UIInterfaceOrientationPortrait];
    }
}

3.2 react-native-orientation 可用函数

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；

官方文档中，还有一些事件的介绍，详细可以到官方文档上了解学习。

3.3 从模拟器中删除以前的应用程序

1. 删除...../Library/Developer/Xcode/DerivedData中的所有文件；
2. 然后从Xcode（Product->Clean Build Folder）中清除构建文件夹。

然后运行应用程序，

3.4 Xcode Crash报错提示Message from debugger: Terminated due to signal 9

原因：

1. 内存使用过高

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中…(img-77KzkOWr-1715793351320)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】