@bingtang-rn/react-native-input-select for HarmonyOS

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

版本对应关系

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

安装

npm install @bingtang-rn/react-native-input-select

使用

import { DropdownSelect } from 'react-native-input-select';

function App() {
  const [value, setValue] = React.useState('');

  return (
    <DropdownSelect
      label="Country"
      placeholder="Select an option..."
      options={[
        { label: 'Nigeria', value: 'NG' },
        { label: 'Algeria', value: 'DZ' },
        { label: 'Andorra', value: 'AD' },
      ]}
      selectedValue={value}
      onValueChange={(val) => setValue(val)}
      primaryColor={'green'}
    />
  );
}

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

平台差异：

• HarmonyOS 上 KeyboardAvoidingView 的 behavior 使用 'height'（与 Android 行为一致）
• HarmonyOS 上 Modal 不支持 onDismiss 属性，已在库内部手动触发

权限要求：

• 无额外权限需求

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-input-select": "file:../../node_modules/@bingtang-rn/react-native-input-select/harmony/input_select.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-input-select/src/main/cpp" ./input_select)

target_link_libraries(rnoh_app PUBLIC input_select)

4. 注册 Package（C++ 侧）

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "InputSelectPackage.h"

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

5. 注册 Package（ETS 侧）

打开 entry/src/main/ets/RNPackagesFactory.ets，添加：

import { InputSelectPackage } from '@bingtang-rn/react-native-input-select/ts';

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

属性 / API

| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 | |-----|------|------|--------|----------------| | DropdownSelect | 下拉选择组件 | props 见下方 | — | ✅ 完全支持 | | isMultiple | 是否多选 | boolean | — | ✅ 完全支持 | | selectedValue | 当前选中值 | TSelectedItem | TSelectedItem[] | — | ✅ 完全支持 | | onValueChange | 选中值变化回调 | (value: TSelectedItem | TSelectedItem[]) => void | void | ✅ 完全支持 | | isSearchable | 是否可搜索 | boolean | — | ✅ 完全支持 | | searchControls | 搜索控件配置 | TSearchControls | — | ✅ 完全支持 | | options | 选项数据（FlatList/SectionList） | TFlatList | TSectionList | — | ✅ 完全支持 | | optionLabel | 选项显示字段名 | string | — | ✅ 完全支持 | | optionValue | 选项值字段名 | string | — | ✅ 完全支持 | | disabled | 是否禁用 | boolean | — | ✅ 完全支持 | | error | 错误文本 | string | — | ✅ 完全支持 | | helperText | 帮助文本 | string | — | ✅ 完全支持 | | primaryColor | 主题色 | ColorValue | — | ✅ 完全支持 | | labelStyle | 标签样式 | TextStyle | — | ✅ 完全支持 | | placeholderStyle | 占位文本样式 | TextStyle | — | ✅ 完全支持 | | dropdownStyle | 下拉框样式 | ViewStyle | — | ✅ 完全支持 | | selectedItemStyle | 选中项样式 | TextStyle | ViewStyle | — | ✅ 完全支持 | | multipleSelectedItemStyle | 多选选中项样式 | TextStyle | ViewStyle | — | ✅ 完全支持 | | dropdownIcon | 自定义下拉图标 | ReactNode | — | ✅ 完全支持 | | dropdownIconStyle | 下拉图标样式 | ViewStyle | — | ✅ 完全支持 | | dropdownContainerStyle | 下拉容器样式 | ViewStyle | — | ✅ 完全支持 | | dropdownErrorStyle | 错误边框样式 | ViewStyle | — | ✅ 完全支持 | | dropdownErrorTextStyle | 错误文本样式 | TextStyle | — | ✅ 完全支持 | | dropdownHelperTextStyle | 帮助文本样式 | TextStyle | — | ✅ 完全支持 | | autoCloseOnSelect | 选中后自动关闭 | boolean | — | ✅ 完全支持 | | minSelectableItems | 最小可选数 | number | — | ✅ 完全支持 | | maxSelectableItems | 最大可选数 | number | — | ✅ 完全支持 | | listHeaderComponent | 列表头部组件 | ReactNode | — | ✅ 完全支持 | | listFooterComponent | 列表尾部组件 | ReactNode | — | ✅ 完全支持 | | listEmptyComponent | 空列表组件 | ReactNode | — | ✅ 完全支持 | | listComponentStyles | 列表组件样式 | object | — | ✅ 完全支持 | | listControls | 列表控件配置 | TListControls | — | ✅ 完全支持 | | checkboxControls | 复选框控件配置 | TCheckboxControls | — | ✅ 完全支持 | | modalControls | 弹窗控件配置 | TCustomModalControls | — | ✅ 完全支持 | | selectedItemsControls | 选中项控件配置 | TSelectedItemsControls | — | ✅ 完全支持 | | ref.open() | 命令式打开下拉 | — | void | ✅ 完全支持 | | ref.close() | 命令式关闭下拉 | — | void | ✅ 完全支持 |

平台差异

• KeyboardAvoidingView：HarmonyOS 端 behavior 使用 'height'（与 Android 一致），不影响功能
• Modal.onDismiss：HarmonyOS 不支持，已在库内部手动触发 onDismiss 回调，行为与 Android 一致

使用限制

• 需在应用根组件包裹 SafeAreaProvider（来自 react-native-safe-area-context）
• 本库为纯 JS/TS 实现，无原生 TurboModule/Fabric 组件，无需手动 Link

快速验证（运行 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 文件。