React Native：iOS端屏幕方向无法切换的问题排查与解决

问题现象 #

用Expo开发应用时，按资料说明移除app.json中expo配置下的orientation属性，或设置为"orientation": "default"，Android端能正常切换横竖屏，但iOS端完全没反应，旋转模拟器屏幕方向不变。已验证模拟器本身旋转功能正常（iOS地图应用可正常旋转）。

曾尝试使用expo-screen-orientation包并按文档配置，iOS端依旧无效，现已移除该包。

效果对比 #

iOS效果 #

Android效果 #

当前代码与配置 #

App.js #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

app.json配置 #

{
  "expo": {
    "name": "AwesomeProject",
    "slug": "AwesomeProject",
    "version": "1.0.0",
    "orientation": "default",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

问题原因与解决方案 #

原因1：iOS模拟器开启了竖屏锁定 #

打开iOS模拟器控制中心（快捷键Shift+Command+C），检查是否开启了"竖屏锁定"，如果开启则关闭，再尝试旋转模拟器。

原因2：iOS配置缺失requireFullScreen #

在app.json的ios配置中添加"requireFullScreen": true，这是iOS端允许屏幕旋转的必要配置：

"ios": {
  "supportsTablet": true,
  "requireFullScreen": true
}

原因3：配置未生效，需清除缓存重启 #

修改配置后执行以下操作：

• 清除Expo缓存：expo r -c
• 重新启动项目：expo start

原因4：需用expo-screen-orientation包做精细控制（可选） #

如果需要动态控制屏幕方向，重新安装包并配置：

1. 安装包：expo install expo-screen-orientation
2. 在app.json中配置插件：

"plugins": [
  [
    "expo-screen-orientation",
    {
      "initialOrientation": "DEFAULT"
    }
  ]
]

3. 在App.js中添加权限请求与方向设置：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import * as ScreenOrientation from 'expo-screen-orientation';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    async function setupOrientation() {
      await ScreenOrientation.requestOrientationAsync(ScreenOrientation.Orientation.DEFAULT);
    }
    setupOrientation();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

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