升级RN 0.63.4至0.71.1后iOS应用布局缩小问题求助

问题概述 #

将React Native版本从0.63.4升级至0.71.1后，iOS应用出现布局缩小的情况（如图所示）。使用Xcode 14.3在Rosetta模拟器中运行，已升级导航及相关依赖，期望应用能全屏显示。

环境信息 #

System:
  OS: macOS 13.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 3.14 GB / 32.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 19.0.0 - ~/.nvm/versions/node/v19.0.0/bin/node
  Yarn: 1.22.19 - /opt/homebrew/bin/yarn
  npm: 8.19.2 - ~/.nvm/versions/node/v19.0.0/bin/npm
  Watchman: 2023.03.13.00 - /opt/homebrew/bin/watchman
Managers:
  CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9123335
  Xcode: 14.3/14C18 - /usr/bin/xcodebuild
Languages:
  Java: 17.0.5 - /usr/bin/javac
npmPackages:
  @react-native-community/cli: Not Found
  react: 18.2.0 => 18.2.0 
  react-native: 0.71.1 => 0.71.1 
  react-native-macos: Not Found

已尝试操作 #

• 升级以下依赖版本：
  • @react-navigation/native-stack: 6.9.12
  • @react-navigation/stack: 6.3.16
  • react-native-safe-area-context: 4.5.3
  • react-native-screens: 3.20.0

解决思路 #

1. 禁用Rosetta，改用原生ARM64模拟器 #

M1芯片上通过Rosetta运行模拟器可能引发兼容性问题，RN 0.71已支持ARM64架构：

• 打开Xcode，选中目标模拟器，右键选择「Get Info」
• 取消勾选「Open using Rosetta」，重启模拟器后重新运行应用

2. 检查启动屏配置 #

RN 0.70+对启动屏的适配要求有更新：

• 打开LaunchScreen.storyboard或LaunchScreen.xib，确认所有控件都设置了正确的Auto Layout约束，确保能铺满屏幕
• 检查Info.plist中的UILaunchScreen相关配置，移除旧的固定尺寸设置，确保依赖自动布局适配

3. 核对AppDelegate配置 #

对比RN 0.71官方模板的AppDelegate文件，确认窗口初始化逻辑：

• 确保UIWindow的rootViewController正确设置，窗口未被手动设置固定frame
• 检查是否使用safeAreaLayoutGuide替代旧的布局方式，保证窗口全屏显示

4. 修正Info.plist全局设置 #

• 添加或修改UIRequiresFullScreen为YES，强制应用全屏运行
• 检查UISupportedInterfaceOrientations设置，确保包含所有必要的屏幕方向

5. 清理缓存并重建项目 #

• 执行命令清理iOS依赖：pod deintegrate && pod install
• 在Xcode中按Cmd+Shift+K清理构建文件，再按Cmd+Option+Shift+K清理完整构建文件夹
• 删除模拟器中的应用，重新编译安装

6. 排查第三方库兼容性 #

部分旧第三方UI库可能未适配RN 0.71：

• 临时移除可疑第三方库，逐一排查是否有库强制设置视图缩放或尺寸
• 查看第三方库更新日志，确认是否有适配RN 0.71的版本，及时升级

内容的提问来源于stack exchange，提问作者Hoang Nguyen Ngoc