RN 0.73.4 iOS端屏幕未铺满且出现旋转缩放按钮问题求助

原因分析 #

右下角的按钮是iOS系统缩放（Zoom）辅助功能的控制器，屏幕未铺满通常和系统缩放启用、App未配置全屏要求或启动图适配不当有关。

解决方案 #

1. 关闭系统缩放功能（临时解决） #

打开iOS设备的「设置」→「辅助功能」→「缩放」，关闭该功能后，右下角的按钮会消失，屏幕也会恢复正常铺满。

2. 强制App全屏并禁止缩放（永久解决） #

修改项目的app.json（或app.config.js），在iOS配置中添加全屏要求和屏幕方向配置：

{
  "name": "你的项目名",
  "ios": {
    "infoPlist": {
      "UIRequiresFullScreen": true,
      "UISupportedInterfaceOrientations": [
        "UIInterfaceOrientationPortrait",
        "UIInterfaceOrientationLandscapeLeft",
        "UIInterfaceOrientationLandscapeRight"
      ]
    }
  }
}

修改后重新编译iOS项目，App会强制全屏，同时系统缩放功能不会影响App显示。

3. 检查启动图适配 #

确保项目的启动图配置正确：

• RN 0.73+推荐使用LaunchScreen.storyboard作为启动界面，避免系统启用兼容模式。
• 如果使用Assets中的启动图，要确保所有尺寸的启动图都已正确添加，没有缺失。

4. 代码小优化 #

你的代码中styles.contentWrapper未定义，建议补充：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  contentWrapper: {
    // 可添加你需要的样式，比如间距等
    gap: 10,
  }
});

内容的提问来源于stack exchange，提问作者peachnice