@bingtang-rn/react-native-orientation-turbo
v2.2.0
Published
适配鸿蒙版本,提供react_native_orientation_turbo组件。
Maintainers
Readme
@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 行为一致)
权限要求:
- 本模块无需声明额外权限
Link
| 版本 | 是否支持 Autolink | |------|------------------| | 当前版本 | 是 |
如使用版本支持 Autolink 且工程已接入,可跳过手动配置。
说明:本模块需要同时在 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-deps4. 生成 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+
遗留问题
无(或列出已知问题)
