React Native应用竖屏锁定失效求助（Xcode+react-native-orientation）

针对你遇到的锁定竖屏无效的情况，结合RN 0.71.12和Xcode14.3.1的环境，按以下步骤排查：

1. 替换废弃的react-native-orientation库 #

原react-native-orientation已经停止维护，对RN 0.60+版本的兼容性很差，建议替换为维护活跃的react-native-orientation-locker：

• 卸载旧库：

  npm uninstall react-native-orientation
  

• 安装新库：

  npm install react-native-orientation-locker
  

• 修改代码：

  import OrientationLocker from 'react-native-orientation-locker';
  
  const App = () => {
    useEffect(() => {
      OrientationLocker.lockToPortrait();
    }, []);
  
    // ...
  };
  

2. 检查AppDelegate的方向配置 #

RN 0.70+默认使用AppDelegate.mm文件，若其中存在重写的方向控制方法，会直接覆盖info.plist的设置。打开ios/[你的项目名]/AppDelegate.mm，确保添加或修改以下方法：

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
  return UIInterfaceOrientationMaskPortrait;
}

3. 排查第三方依赖的覆盖问题 #

这些常见库可能会修改全局方向设置：

• react-navigation：检查Stack Navigator的screenOptions，是否有屏幕单独设置了screenOrientation: 'all'之类的选项，全局配置要确保统一为竖屏：

  <Stack.Navigator
    screenOptions={{
      screenOrientation: 'portrait' // 强制所有屏幕竖屏
    }}
  >
    {/* 你的屏幕 */}
  </Stack.Navigator>
  

• 媒体类库：如react-native-video、expo-av等，部分视频播放组件会自动切换方向适配播放，检查组件配置是否开启了强制横屏，需关闭该选项。
• 冲突的方向库：确认没有同时安装多个方向控制库（如同时装了react-native-orientation和react-native-orientation-locker），避免冲突。

4. 清理缓存并重新构建 #

缓存问题常导致设置不生效，执行以下操作：

• Xcode：点击Product -> Clean Build Folder（快捷键Cmd+Shift+K）
• RN项目：

  npm start -- --reset-cache
  

• iOS Pods：

  cd ios && pod deintegrate && pod install && cd ..
  

5. 验证info.plist的完整配置 #

确保UISupportedInterfaceOrientations和UISupportedInterfaceOrientations~ipad没有多余的方向值，完整配置如下：

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

按以上步骤逐一排查，基本可以解决竖屏锁定失效的问题。

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