Expo v48 React Native iOS屏幕方向锁定失效，如何禁用分屏？

一、彻底禁用iOS分屏功能 #

你当前的app.json已配置requireFullScreen，但需配合以下操作确保生效：

• 该配置仅在**自定义构建（EAS Build / expo run:ios）**中生效，Expo Go预览无法测试分屏禁用效果
• 若配置未生效，通过expo-build-properties插件强制写入Info.plist配置：
  1. 安装插件：

  npx expo install expo-build-properties
  

  2. 更新app.json插件配置：

  {
    "expo": {
      "ios": {
        "requireFullScreen": true
      },
      "plugins": [
        [
          "expo-screen-orientation",
          {
            "initialOrientation": "LANDSCAPE" // 直接设置初始横屏，替代DEFAULT
          }
        ],
        [
          "expo-build-properties",
          {
            "ios": {
              "infoPlist": {
                "UIRequiresFullScreen": true,
                "UISupportedInterfaceOrientations": [
                  "UIInterfaceOrientationLandscapeLeft",
                  "UIInterfaceOrientationLandscapeRight"
                ]
              }
            }
          }
        ]
      ]
    }
  }
  

  这里直接指定初始横屏方向，并限制应用仅支持横屏，从根源避免分屏干扰。

二、代码层面强制锁定横屏 #

仅靠配置无法完全确保锁定，需在应用启动时主动调用API：
在根组件（如App.js）中添加以下逻辑：

import { useEffect } from 'react';
import * as ScreenOrientation from 'expo-screen-orientation';

export default function App() {
  useEffect(() => {
    const lockToLandscape = async () => {
      try {
        // 锁定为左右横屏模式
        await ScreenOrientation.lockAsync(
          ScreenOrientation.OrientationLock.LANDSCAPE
        );
      } catch (err) {
        console.error('横屏锁定失败:', err);
      }
    };

    lockToLandscape();

    // 可选：组件卸载时解锁方向
    return () => ScreenOrientation.unlockAsync();
  }, []);

  // 你的应用内容
  return (
    // ...
  );
}

三、验证注意事项 #

• 必须使用自定义构建测试：Expo Go是通用应用，不支持requireFullScreen等专属配置
• 检查设备设置：关闭iOS控制中心的「旋转锁定」，避免系统级设置覆盖应用配置
• 版本兼容：确保expo-screen-orientation版本为~5.1.1（与Expo v48匹配），可在package.json中确认

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