React Native无需第三方库：如何在启动时获取带角度的设备朝向？

好问题！你已经挖到了React Native里一个未公开的设备朝向监听事件namedOrientationDidChange，能拿到包含旋转角度、横竖屏状态和朝向名称的详细数据，但启动时的初始状态确实没法直接通过这个事件拿到——毕竟事件只有在变化时才会触发。针对Android环境（你提到仅在Android测试过），这里有几个靠谱的方案：

方案1：自定义Native Module调用Android原生API #

既然namedOrientationDidChange事件的数据本质是来自Android原生的系统朝向信息，那我们可以直接写一个极简的Native Module，在App启动时主动获取一次原生的朝向数据，格式和事件返回的保持一致。

步骤1：编写Android原生代码 #

在你的React Native项目的android/app/src/main/java/com/[你的项目名]/目录下新建一个OrientationModule.java文件：

package com.yourprojectname;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.WritableNativeMap;
import android.view.Surface;
import android.view.WindowManager;

public class OrientationModule extends ReactContextBaseJavaModule {

    private final ReactApplicationContext reactContext;

    public OrientationModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

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

    @ReactMethod
    public void getInitialOrientation() {
        WindowManager windowManager = reactContext.getSystemService(WindowManager.class);
        int rotation = windowManager.getDefaultDisplay().getRotation();
        WritableMap orientationData = new WritableNativeMap();
        
        boolean isLandscape = false;
        String name = "";
        int rotationDegrees = 0;

        switch (rotation) {
            case Surface.ROTATION_0:
                rotationDegrees = 0;
                isLandscape = false;
                name = "portrait-primary";
                break;
            case Surface.ROTATION_90:
                rotationDegrees = 90;
                isLandscape = true;
                name = "landscape-primary";
                break;
            case Surface.ROTATION_180:
                rotationDegrees = 180;
                isLandscape = false;
                name = "portrait-secondary";
                break;
            case Surface.ROTATION_270:
                rotationDegrees = -90;
                isLandscape = true;
                name = "landscape-secondary";
                break;
        }

        orientationData.putInt("rotationDegrees", rotationDegrees);
        orientationData.putBoolean("isLandscape", isLandscape);
        orientationData.putString("name", name);

        // 通过DeviceEventEmitter发送初始数据，和你原来的监听事件用同一个名称，方便统一处理
        reactContext.getJSModule(com.facebook.react.modules.core.DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("namedOrientationDidChange", orientationData);
    }
}

然后在同目录下的MainApplication.java中注册这个模块：

// 导入OrientationModule
import com.yourprojectname.OrientationModule;

// 在getPackages()方法里添加模块
@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 新增这一行
    packages.add(new ReactPackage() {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new OrientationModule(reactContext));
            return modules;
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    });
    return packages;
}

步骤2：RN端调用并监听 #

在你的RN代码里，先添加事件监听器，然后调用Native Module获取初始数据：

import { DeviceEventEmitter, NativeModules } from 'react-native';

const { OrientationModule } = NativeModules;

function handleOrientationDidChange(data) {
    console.log('orientation info:', data);
    // 这里可以统一处理初始数据和后续变化的数据
}

// 先添加监听器
DeviceEventEmitter.addListener('namedOrientationDidChange', handleOrientationDidChange);

// 启动时主动获取初始朝向数据
OrientationModule.getInitialOrientation();

这样一来，App启动时就会立刻收到和namedOrientationDidChange事件格式完全一致的初始朝向数据，后续的朝向变化也会正常触发监听，逻辑完全统一。

方案2：利用RN的Dimensions模块做基础判断（简易版） #

如果你不想写原生代码，可以先用Dimensions模块判断初始的横竖屏状态，再结合常见的设备朝向逻辑补全角度和名称（但这个方法的角度准确性依赖设备默认朝向，不如原生方法精准）：

import { Dimensions } from 'react-native';

function getInitialOrientationSimple() {
    const { width, height } = Dimensions.get('window');
    const isLandscape = width > height;
    let rotationDegrees = 0;
    let name = "";

    if (isLandscape) {
        // 默认横屏假设是landscape-primary，角度90；如果是反向横屏需要额外判断，但RN本身拿不到这个
        rotationDegrees = 90;
        name = "landscape-primary";
    } else {
        rotationDegrees = 0;
        name = "portrait-primary";
    }

    return { rotationDegrees, isLandscape, name };
}

// 启动时调用
const initialOrientation = getInitialOrientationSimple();
console.log('initial orientation (simple):', initialOrientation);

⚠️ 注意：这个简易版没法区分正向/反向横屏（比如landscape-primary和landscape-secondary），也拿不到准确的负角度，适合对精度要求不高的场景。

重要提示 #

因为你用到的namedOrientationDidChange是未公开的API，未来React Native版本更新可能会移除或修改这个事件，所以建议在升级RN版本后及时测试相关逻辑。

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