用户可快速在鸿蒙应用中实现下拉选择功能。该项目为 react-native-dropdown 的鸿蒙适配版，支持 Select、Option 等核心组件及相关 API，适配 HarmonyOS Fabric 模式，无需权限，使用原库名导入。【此简介由AI生成】
| 文件 | 最后提交记录 | 最后更新时间 |
|---|---|---|
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 | ||
| 1 个月前 |
@bingtang-rn/react-native-dropdown for HarmonyOS
本项目基于 react-native-dropdown 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：issues。
版本对应关系
| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |
|---|---|---|---|---|
| 0.0.6 | 0.0.6 | 0.72+ | 否（js-only） | API17+ |
安装
npm install @bingtang-rn/react-native-dropdown
使用
import { Select, Option, OptionList, updatePosition } from 'react-native-dropdown';
// Basic usage
const optionListRef = useRef(null);
<Select
width={200}
height={40}
optionListRef={() => optionListRef.current}
onSelect={(value) => console.log('Selected:', value)}
defaultValue="Option A"
>
<Option>Option A</Option>
<Option>Option B</Option>
<Option>Option C</Option>
</Select>
<OptionList ref={optionListRef} />
import 时使用原库名
'react-native-dropdown'，而非鸿蒙包名。
平台差异：
- HarmonyOS 上
UIManager.measure不可用（Fabric 模式限制），已替换为ref.current.measure()获取组件绝对坐标，功能对等。 updatePosition()函数在 HarmonyOS 上使用ref.current.measure()替代UIManager.measure，行为一致。
权限要求：
- 无需任何权限声明。
Link
| 版本 | 是否支持 Autolink |
|---|---|
| 当前版本 | 否（js-only 库，无需原生注册） |
如使用版本支持 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-dropdown": "file:../../node_modules/@bingtang-rn/react-native-dropdown/harmony/dropdown.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-dropdown/src/main/cpp" ./dropdown)
target_link_libraries(rnoh_app PUBLIC dropdown)
4. 注册 Package（C++ 侧）
打开 entry/src/main/cpp/PackageProvider.cpp，添加：
#include "DropdownPackage.h"
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {
std::make_shared<DropdownPackage>(ctx),
};
}
5. 注册 Package（ETS 侧）
打开 entry/src/main/ets/RNPackagesFactory.ets，添加：
import { DropdownPackage } from '@bingtang-rn/react-native-dropdown/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
new DropdownPackage(ctx),
];
}
属性 / API
| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |
|---|---|---|---|---|
| Select | 下拉选择组件 | width, height, optionListRef, onSelect, defaultValue, placeholder, style, styleOption, styleText, optionListProps, value | — | ✅ 完全支持 |
| Select.reset() | 重置选择为默认值 | — | void | ✅ 完全支持 |
| Select.show() | 编程式打开下拉列表 | — | void | ✅ 完全支持 |
| Option | 选项组件 | style, styleText, value, children | — | ✅ 完全支持 |
| OptionList | 选项列表浮层组件 | customScrollViewComp | — | ✅ 完全支持 |
| updatePosition | 获取组件位置 | ref, debug? | void | ✅ 完全支持 |
平台差异
updatePosition：原库使用UIManager.measure+findNodeHandle，HarmonyOS Fabric 模式不支持，已替换为ref.current.measure()，功能对等（均返回 pageX/pageY 绝对坐标）。
未实现功能
无
使用限制
OptionList组件须渲染在与Select同级的根层级，以支持绝对定位的浮层效果。- 原库代码极旧（RN 0.10 时代），本适配版已将废弃 API（componentWillReceiveProps、字符串 ref、PropTypes）迁移为现代写法。
快速验证（运行 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+
遗留问题
无（或列出已知问题）