react_native_orientation_turbo:基于 React Native 鸿蒙生态的屏幕方向管理库项目

用户可用于在 React Native 鸿蒙应用中管理屏幕方向,支持锁定横竖屏、解锁自动旋转、获取当前方向及监听方向和锁定状态变化,适配 API12+,与原库接口一致且支持 Autolink。【此简介由AI生成】

分支3Tags0
当前项目代码仓暂无内容

@bingtang-rn/react-native-orientation-turbo for HarmonyOS

本项目基于 react-native-orientation-turbo 开发,为 React Native 鸿蒙(OpenHarmony)适配版本。如果在使用过程中有任何问题,可以在GitCode提Issue,会及时跟进。issue地址:issues

版本对应关系

鸿蒙适配包版本 原始库版本 支持 RN 版本 Autolink 编译 API 版本
见发布记录 2.2.0 0.72+ 是/否 API17+

安装

npm install @bingtang-rn/react-native-orientation-turbo

使用

import {
  lockToPortrait,
  lockToLandscape,
  unlockAllOrientations,
  getCurrentOrientation,
  isLocked,
  onOrientationChange,
  onLockOrientationChange,
  startOrientationTracking,
  stopOrientationTracking,
  LandscapeDirection,
} from 'react-native-orientation-turbo';

// 锁定竖屏
lockToPortrait();
lockToPortrait('UPSIDE_DOWN');

// 锁定横屏
lockToLandscape(LandscapeDirection.LEFT);
lockToLandscape(LandscapeDirection.RIGHT);

// 解锁方向(跟随传感器自动旋转)
unlockAllOrientations();

// 获取当前方向
const orientation = getCurrentOrientation(); // 'PORTRAIT' | 'LANDSCAPE_LEFT' | ...

// 查询是否锁定
const locked = isLocked();

// 监听方向变化
startOrientationTracking();
const sub = onOrientationChange((event) => {
  console.log('方向变为:', event.orientation);
});

// 监听锁定状态变化
const lockSub = onLockOrientationChange((event) => {
  console.log('锁定状态:', event.isLocked, '方向:', event.orientation);
});

import 时使用原库名 'react-native-orientation-turbo',而非鸿蒙包名。

平台差异

  • HarmonyOS 上 getDeviceAutoRotateStatus() 返回 null(鸿蒙无查询系统自动旋转开关的公共 API,与 iOS 行为一致)
  • HarmonyOS 不支持 FACE_UP / FACE_DOWN 方向(无设备物理姿态传感器暴露给方向 API,与 Android 行为一致)

权限要求

  • 本模块无需声明额外权限
版本 是否支持 Autolink
当前版本

如使用版本支持 Autolink 且工程已接入,可跳过手动配置。

Manual Link 配置

说明:本模块需要同时在 C++ 侧和 ETS 侧注册 Package。

1. Overrides RN SDK

在工程根目录 oh-package.json5 添加:

{
  "overrides": {
    "@rnoh/react-native-openharmony": "./react_native_openharmony"
  }
}

2. 引入原生端依赖

打开 entry/oh-package.json5,添加:

"dependencies": {
  "@bingtang-rn/react-native-orientation-turbo": "file:../../node_modules/@bingtang-rn/react-native-orientation-turbo/harmony/orientation_turbo.har"
}

执行 ohpm install

3. 配置 CMakeLists

打开 entry/src/main/cpp/CMakeLists.txt,添加:

set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

add_subdirectory("${OH_MODULES}/@bingtang-rn/react-native-orientation-turbo/src/main/cpp" ./orientation_turbo)

target_link_libraries(rnoh_app PUBLIC orientation_turbo)

4. 注册 Package(C++ 侧)

打开 entry/src/main/cpp/PackageProvider.cpp,添加:

#include "OrientationTurboPackage.h"

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<OrientationTurboPackage>(ctx),
    };
}

5. 注册 Package(ETS 侧)

打开 entry/src/main/ets/RNPackagesFactory.ets,添加:

import { OrientationTurboPackage } from '@bingtang-rn/react-native-orientation-turbo/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new OrientationTurboPackage(ctx),
  ];
}

属性 / API

API 描述 参数 返回值 HarmonyOS 支持
lockToPortrait 锁定竖屏 direction?: string ('UP'/'UPSIDE_DOWN') void ✅ 完全支持
lockToLandscape 锁定横屏 direction: string ('LEFT'/'RIGHT') void ✅ 完全支持
unlockAllOrientations 解锁所有方向 void ✅ 完全支持
getCurrentOrientation 获取当前方向 string ✅ 完全支持
isLocked 查询是否锁定 boolean ✅ 完全支持
startOrientationTracking 开始方向追踪 void ✅ 完全支持
stopOrientationTracking 停止方向追踪 void ✅ 完全支持
getDeviceAutoRotateStatus 获取自动旋转状态 {isAutoRotateEnabled, canDetectOrientation} | null ⚠️ 部分支持(返回 null)
onOrientationChange 方向变化事件 callback EventSubscription ✅ 完全支持
onLockOrientationChange 锁定状态变化事件 callback EventSubscription ✅ 完全支持

平台差异

  • getDeviceAutoRotateStatus():HarmonyOS 返回 null(无查询系统自动旋转开关的公共 API),与 iOS 行为一致
  • FACE_UP / FACE_DOWN:HarmonyOS 不支持这两个方向值(无设备物理姿态传感器暴露给方向 API),与 Android 行为一致
  • PORTRAIT_UPSIDE_DOWN:Android 大多数设备不支持,HarmonyOS 通过 window.Orientation.PORTRAIT_INVERTED 支持

方向映射说明

RN 方向 含义 HarmonyOS window.Orientation
PORTRAIT HOME 在下 PORTRAIT
LANDSCAPE_RIGHT HOME 在右 LANDSCAPE
LANDSCAPE_LEFT HOME 在左 LANDSCAPE_INVERTED
PORTRAIT_UPSIDE_DOWN HOME 在上 PORTRAIT_INVERTED

未实现功能

API 原因
getDeviceAutoRotateStatus 返回非 null 值 HarmonyOS 无查询系统自动旋转开关状态的公共 API

快速验证(运行 Example)

前置条件

依赖 版本要求
Node.js >= 18
DevEco Studio 5.0+ / 6.0+
HarmonyOS SDK API 17+

运行步骤

1. 克隆仓库

git clone <仓库地址>
cd <仓库目录>

2. 安装依赖并构建

npm install --legacy-peer-deps
npm pack           # 生成 tgz 包(会自动触发 prepare 构建 JS 产物)

3. 进入 example 目录,安装依赖

cd example
npm install --legacy-peer-deps

4. 生成 JS Bundle

npm run dev

产物:harmony/entry/src/main/resources/rawfile/bundle.harmony.js

5. 用 DevEco Studio 打开鸿蒙工程

  • 打开 DevEco Studio
  • 选择 example/harmony 目录
  • 等待 Sync 完成

6. 编译并运行 HAP

在 DevEco Studio 中点击运行按钮,将 HAP 安装到设备/模拟器。

注意:Example 中已预置插件依赖和 Package 注册,无需手动配置 Link。

约束与限制

兼容性

  • RNOH: 0.72+
  • HarmonyOS SDK: API 17+
  • DevEco Studio: 5.0+

遗留问题

无(或列出已知问题)

开源协议

本项目基于 MIT 协议,详见 LICENSE 文件。

项目介绍

用户可用于在 React Native 鸿蒙应用中管理屏幕方向,支持锁定横竖屏、解锁自动旋转、获取当前方向及监听方向和锁定状态变化,适配 API12+,与原库接口一致且支持 Autolink。【此简介由AI生成】

定制我的领域