React Native如何在不触发屏幕旋转的情况下检测自动旋转状态？

我正尝试在React Native中同时检测Android和iOS设备的自动旋转状态，目标实现以下逻辑：当用户旋转设备且自动旋转功能开启时，应用进入全屏模式；若自动旋转功能关闭，则无任何操作。

目前尝试了两种方案，但都存在局限：

• Android专属方案：依赖react-native-orientation-locker，仅支持Android，无法在iOS上使用

// Android-only approach
import Orientation from 'react-native-orientation-locker';

Orientation.getAutoRotateState((isAutoRotateEnabled) => {
  console.log('Auto rotation enabled:', isAutoRotateEnabled);
  // Only works on Android, doesn't work on iOS
});

• 需触发屏幕旋转的方案：依赖Expo Sensors，必须等用户旋转设备并触发屏幕尺寸变化才能判断状态，无法提前获知

// Approach that requires screen rotation to work
import { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';
import { DeviceMotion } from 'expo-sensors';

const detectAutoRotation = () => {
  const [isRotationEnabled, setIsRotationEnabled] = useState(null);
  let deviceRotated = false;
  
  useEffect(() => {
    // Track device motion
    const motionSubscription = DeviceMotion.addListener(({ rotation }) => {
      if (Math.abs(rotation.beta) > 0.5 || Math.abs(rotation.gamma) > 0.5) {
        deviceRotated = true;
      }
    });
    
    const dimensionsSubscription = Dimensions.addEventListener('change', () => {
      if (deviceRotated) {
        setIsRotationEnabled(true);
      }
    });
    
    // Check after a timeout
    const timeoutId = setTimeout(() => {
      if (deviceRotated && !isRotationEnabled) {
        setIsRotationEnabled(false);
      }
      
      // Clean up
      dimensionsSubscription.remove();
      motionSubscription.remove();
    }, 200);
    
    return () => {
      clearTimeout(timeoutId);
      dimensionsSubscription.remove();
      motionSubscription.remove();
    };
  }, []);
  
  return isRotationEnabled;
};

核心诉求：在用户旋转设备之前、且不触发屏幕旋转的情况下，跨平台获知自动旋转状态，是否存在无需依赖原生模块的方法？

首先明确：自动旋转状态属于系统级权限，React Native核心库未暴露相关API，因此不存在完全无需依赖原生模块的跨平台方案，但可以通过成熟的第三方库或轻量原生封装实现，避免自己编写复杂原生代码。

1. 跨平台第三方库方案（推荐） #

使用react-native-device-info，它已封装好iOS和Android的系统状态检测逻辑，无需手动编写原生代码：

import DeviceInfo from 'react-native-device-info';

// 异步检测自动旋转状态（跨平台）
const checkAutoRotateStatus = async () => {
  const isAutoRotateEnabled = await DeviceInfo.isAutoRotateEnabled();
  console.log('自动旋转状态:', isAutoRotateEnabled);
  return isAutoRotateEnabled;
};

• 实现原理：iOS上通过系统设置与设备通知状态结合判断；Android上直接调用系统Settings.System.ACCELEROMETER_ROTATIONAPI获取状态。
• 注意事项：确保使用最新版本的库，旧版本可能存在iOS适配问题。

2. Expo环境专属方案 #

若项目基于Expo，可使用expo-device库，完全适配Expo生态，无需 eject：

import * as Device from 'expo-device';

const checkAutoRotate = async () => {
  const isEnabled = await Device.isAutoRotationEnabledAsync();
  console.log('自动旋转状态:', isEnabled);
  return isEnabled;
};

3. 轻量原生模块封装（不推荐，除非必须） #

若不想依赖第三方库，可针对iOS/Android分别编写极简原生模块，再通过React Native的NativeModules调用：

Android端原生代码（Java） #

import android.provider.Settings;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Promise;

public class AutoRotateModule extends ReactContextBaseJavaModule {
  public AutoRotateModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "AutoRotateModule";
  }

  @ReactMethod
  public void getAutoRotateStatus(Promise promise) {
    int rotationSetting = Settings.System.getInt(
      getReactApplicationContext().getContentResolver(),
      Settings.System.ACCELEROMETER_ROTATION,
      0
    );
    promise.resolve(rotationSetting == 1);
  }
}

iOS端原生代码（Swift） #

import UIKit
import React

@objc(AutoRotateModule)
class AutoRotateModule: NSObject, RCTBridgeModule {
  static func moduleName() -> String! {
    return "AutoRotateModule"
  }

  static func requiresMainQueueSetup() -> Bool {
    return true
  }

  @objc func getAutoRotateStatus(_ resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) {
    let isEnabled = UIDevice.current.isGeneratingDeviceOrientationNotifications && 
      UIApplication.shared.supportedInterfaceOrientations(for: nil).count > 1
    resolve(isEnabled)
  }
}

React Native端调用 #

import { NativeModules } from 'react-native';
const { AutoRotateModule } = NativeModules;

const checkAutoRotate = async () => {
  const isEnabled = await AutoRotateModule.getAutoRotateStatus();
  console.log('自动旋转状态:', isEnabled);
};

结合需求的完整逻辑示例 #

将自动旋转状态检测与屏幕方向监听结合，实现目标逻辑：

import { useEffect } from 'react';
import Orientation from 'react-native-orientation-locker';
import DeviceInfo from 'react-native-device-info';

const setupFullscreenOnRotation = () => {
  useEffect(() => {
    const orientationListener = Orientation.addOrientationListener(async (orientation) => {
      const isAutoRotateEnabled = await DeviceInfo.isAutoRotateEnabled();
      // 当自动旋转开启且设备转为横屏时，进入全屏
      if (isAutoRotateEnabled && ['LANDSCAPE-LEFT', 'LANDSCAPE-RIGHT'].includes(orientation)) {
        console.log('进入全屏模式');
        // 这里添加你的全屏逻辑
      }
    });

    return () => {
      Orientation.removeOrientationListener(orientationListener);
    };
  }, []);
};

内容的提问来源于stack exchange，提问作者Đan Nguyễn Hải