@bingtang-rn/react-native-popable for HarmonyOS

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

版本对应关系

安装

npm install @bingtang-rn/react-native-popable

使用

import { Popable, usePopable, Popover } from 'react-native-popable';

// Basic usage
<Popable content="Hello!">
  <Button title="Press me" />
</Popable>

// Imperative control
const { ref, show, hide } = usePopable();
<Popable ref={ref} content="Tooltip">
  <Button title="Target" />
</Popable>
<Button title="Show" onPress={show} />
<Button title="Hide" onPress={hide} />

import 时使用原库名 'react-native-popable'，而非鸿蒙包名。

平台差异：

• action='hover' 在 HarmonyOS 上回退为 press 行为（与 Android/iOS 一致），因 ArkUI 无 hover 事件
• Modal 在 RNOH 映射为 ArkUI CustomDialog，路由跳转时不会自动关闭，需 JS 层主动处理

权限要求：

• 无

Link

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

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

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

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

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

target_link_libraries(rnoh_app PUBLIC popable)

#include "PopablePackage.h"

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

import { PopablePackage } from '@bingtang-rn/react-native-popable/ts';

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

属性 / API

平台差异

• action='hover'：HarmonyOS 上回退为 press，因 ArkUI 无鼠标 hover 事件
• Modal：RNOH 映射为 CustomDialog，路由跳转时需 JS 层主动关闭

使用限制

• measureInWindow 在 Fabric 模式下可能存在布局测量时序差异，影响自动位置翻转；onLayout 作为补充

快速验证（运行 Example）

前置条件

运行步骤

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 文件。