{"_id":"@bingtang-rn/react-native-picky","_rev":"2-0ee8978eef99a108b4cd868dd740aaf4","name":"@bingtang-rn/react-native-picky","dist-tags":{"latest":"0.4.1"},"versions":{"0.4.0":{"name":"@bingtang-rn/react-native-picky","version":"0.4.0","keywords":["react-native","harmony","harmonyos","react-native-picky"],"license":"MIT","_id":"@bingtang-rn/react-native-picky@0.4.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_picky","dist":{"shasum":"936498905ae4d79874cbd8fc9ac6476c10777ac6","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-picky/-/react-native-picky-0.4.0.tgz","fileCount":38,"integrity":"sha512-c5J/a4Lf+g+3FU8FkcIQrPhb+d5StW4VRRFPLiWBL+pN8wy2r2DEem/Au+xlE6D5hzgL7ism+CGrMrWfzAZNyw==","signatures":[{"sig":"MEUCIQChkK88fRHvdjA48sp4wbrRdz55FWBK2p3MQjrdtZ3mEAIgHFqjh829iuC7siLzA80G1C5FGT4nX/DyZzZWdsHpo/A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66353},"main":"./src/index.ts","module":"./src/index.ts","engines":{"node":">=18"},"gitHead":"a33038488cf7e729cc771cca0adcfc5dbf04bbb3","harmony":{"alias":"react-native-picky","autolinking":{"ohPackageName":"@oh-rn/react-native-picky","cppPackageClassName":"PickyPackage","etsPackageClassName":"PickyPackage","cmakeLibraryTargetName":"picky"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/picky/src/main/cpp/generated --ets-output-path ./harmony/picky/src/main/ets/generated"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_picky","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_picky组件。","directories":{},"_nodeVersion":"24.15.0","react-native":"./src/index.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"tmp":"tmp/react-native-picky_0.4.0_1785417689740_0.7693760464213255","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"_id":"@bingtang-rn/react-native-picky@0.4.1","dist":{"shasum":"0ed715ab1494b719dd981bb33768ce9bea811870","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-picky/-/react-native-picky-0.4.1.tgz","fileCount":38,"integrity":"sha512-S93JPLI/fyK7jB0MPVQlOglgAMQ3UfcvE0XI2nEePpfhxxUEWbDbxggqCW0S3kQ+z4xumNolo12DQ0VK90X2LA==","signatures":[{"sig":"MEYCIQC3AyC36PJ+0EE8bIqOIG3REMnZPns9msVXBwuyLoFmNQIhAOx+SzSUgG/PQQpSAkIO0PoL/4ZqvW2X6ROvErm871Sn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDBUVoCPkL86s6S21GRkuzKWlxds41wdRNKxosVEX5RgAIhAMpKRJLcHje5NFMib6GReVOaaQ42I0L1GPzLGUdAIEju"}],"unpackedSize":66553},"main":"./src/index.ts","name":"@bingtang-rn/react-native-picky","_from":"file:bingtang-rn-react-native-picky-0.4.1.tgz","module":"./src/index.ts","engines":{"node":">=18"},"harmony":{"alias":"react-native-picky","autolinking":{"ohPackageName":"@bingtang-rn/react-native-picky","cppPackageClassName":"PickyPackage","etsPackageClassName":"PickyPackage","cmakeLibraryTargetName":"picky"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"license":"MIT","private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/picky/src/main/cpp/generated --ets-output-path ./harmony/picky/src/main/ets/generated"},"version":"0.4.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_picky","keywords":["react-native","harmony","harmonyos","react-native-picky"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_picky\\bingtang-rn-react-native-picky-0.4.1.tgz","_integrity":"sha512-S93JPLI/fyK7jB0MPVQlOglgAMQ3UfcvE0XI2nEePpfhxxUEWbDbxggqCW0S3kQ+z4xumNolo12DQ0VK90X2LA==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_picky","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_picky组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","react-native":"./src/index.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-picky_0.4.1_1790569532144_0.20224818509820386"}}},"time":{"created":"2026-07-30T13:21:24.582Z","modified":"2026-09-28T04:25:32.412Z","0.4.0":"2026-07-30T13:21:29.870Z","0.4.1":"2026-09-28T04:25:32.238Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_picky","keywords":["react-native","harmony","harmonyos","react-native-picky"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_picky","type":"git"},"description":"适配鸿蒙版本，提供react_native_picky组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-picky for HarmonyOS\r\n\r\n本项目基于 [react-native-picky](https://github.com/Liamandrew/react-native-picky) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_picky/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 见发布记录 | 0.4.0 | 0.72+ | 否 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-picky\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport { Picker, PickerColumn, PickerItem } from 'react-native-picky';\r\n\r\n// 单列循环选择器\r\n console.log(e.value)}>\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n// 多列循环选择器\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\n> import 时使用原库名 `'react-native-picky'`，而非鸿蒙包名。\r\n\r\n**平台差异**：\r\n- HarmonyOS 使用 TextPicker 组件实现，`hasIndicator` 映射到 divider，`hasCurtain` 映射到上下渐隐效果\r\n- HarmonyOS TextPicker 的渐隐效果不支持自定义颜色，因此 `curtainColor` 不生效\r\n- HarmonyOS 不支持单项文本颜色（PickerItem.color），仅支持全局 textColor\r\n- HarmonyOS 不支持 numberOfLines，选项文本单行截断\r\n\r\n**权限要求**：\r\n- 无需声明额外权限\r\n\r\n## Link\r\n\r\n| 版本 | 是否支持 Autolink |\r\n|------|------------------|\r\n| 当前版本 | 否 |\r\n\r\n如使用版本支持 Autolink 且工程已接入，可跳过手动配置。\r\n\r\n\r\nManual Link 配置
\r\n\r\n> **说明**：本模块需要同时在 C++ 侧和 ETS 侧注册 Package。\r\n\r\n### 1. Overrides RN SDK\r\n\r\n在工程根目录 `oh-package.json5` 添加：\r\n\r\n```json\r\n{\r\n \"overrides\": {\r\n \"@rnoh/react-native-openharmony\": \"./react_native_openharmony\"\r\n }\r\n}\r\n```\r\n\r\n### 2. 引入原生端依赖\r\n\r\n打开 `entry/oh-package.json5`，添加：\r\n\r\n```json\r\n\"dependencies\": {\r\n \"@bingtang-rn/react-native-picky\": \"file:../../node_modules/@bingtang-rn/react-native-picky/harmony/picky.har\"\r\n}\r\n```\r\n\r\n执行 `ohpm install`。\r\n\r\n### 3. 配置 CMakeLists\r\n\r\n打开 `entry/src/main/cpp/CMakeLists.txt`，添加：\r\n\r\n```cmake\r\nset(OH_MODULES \"${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules\")\r\n\r\nadd_subdirectory(\"${OH_MODULES}/@bingtang-rn/react-native-picky/src/main/cpp\" ./picky)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC picky)\r\n```\r\n\r\n### 4. 注册 Package（C++ 侧）\r\n\r\n打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：\r\n\r\n```cpp\r\n#include \"PickyPackage.h\"\r\n\r\nstd::vector> PackageProvider::getPackages(Package::Context ctx) {\r\n return {\r\n std::make_shared(ctx),\r\n };\r\n}\r\n```\r\n\r\n### 5. 注册 Package（ETS 侧）\r\n\r\n打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加：\r\n\r\n```typescript\r\nimport { PickyPackage } from '@bingtang-rn/react-native-picky/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n return [\r\n new PickyPackage(ctx),\r\n ];\r\n}\r\n```\r\n\r\n \r\n\r\n## 属性 / API\r\n\r\n| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |\r\n|-----|------|------|--------|----------------|\r\n| Picker | 滚轮选择器主组件 | loop, hasCurtain, curtainColor, hasIndicator, indicatorColor, indicatorSize, itemSpace, textColor, textSize, numberOfLines, onChange | — | ⚠️ 部分支持 |\r\n| PickerColumn | 列定义容器 | width, selectedValue, onChange | — | ⚠️ 部分支持（width 需 API17+） |\r\n| PickerItem | 选项定义 | label, value, color, testID | — | ⚠️ 部分支持（color 不支持单项颜色） |\r\n| data | 多列选择数据 | PickerDataItem[][] | — | ✅ 完全支持 |\r\n| selectedIndexes | 选中项索引 | Int32[] | — | ✅ 完全支持 |\r\n| loop | 循环滚动 | boolean | — | ✅ 完全支持 |\r\n| hasIndicator | 是否显示指示器 | boolean | — | ✅ 完全支持（通过 divider 实现） |\r\n| indicatorColor | 指示器颜色 | Int32 | — | ✅ 完全支持（映射到 divider.color） |\r\n| indicatorSize | 指示器线宽 | Float | — | ✅ 完全支持（映射到 divider.strokeWidth） |\r\n| hasCurtain | 是否显示遮罩 | boolean | — | ✅ 完全支持（通过 gradientHeight 实现） |\r\n| curtainColor | 遮罩颜色 | Int32 | — | ❌ 不支持（TextPicker 渐隐颜色不可配置） |\r\n| itemSpace | 选项行间距 | Float | — | ✅ 完全支持（结合 textSize 计算选项完整行高） |\r\n| textColor | 全局文本颜色 | Int32 | — | ✅ 完全支持（选中项原色，未选中项渐弱） |\r\n| textSize | 全局文本字号 | Float | — | ✅ 完全支持 |\r\n| onChange | 选中项变更回调 | DirectEventHandler | {column, index, value} | ✅ 完全支持 |\r\n| columnWidths | 列宽 | Float[] | — | ⚠️ 部分支持（需 API17+） |\r\n| numberOfLines | 选项文本行数 | Int32 | — | ❌ 不支持（TextPicker 不支持多行） |\r\n| PickerItem.color | 单项文本颜色 | ColorValue | — | ❌ 不支持（TextPicker 仅支持全局 textStyle） |\r\n\r\n### 平台差异\r\n- `hasCurtain`：映射到 TextPicker 的 `gradientHeight`，关闭时将渐隐高度设置为 0\r\n- `curtainColor`：TextPicker 的渐隐效果不支持自定义颜色\r\n- `hasIndicator` / `indicatorColor` / `indicatorSize`：映射到 TextPicker 的 divider 属性（颜色、线宽）\r\n- `itemSpace`：与 `textSize` 共同计算 TextPicker 的完整选项行高，避免字号大于行高时裁剪文字\r\n- 选中项高亮：选中项使用完整 `textColor` 和 Medium 字重，待选项、边缘项依次降低透明度\r\n\r\n### 未实现功能\r\n| API | 原因 |\r\n|-----|------|\r\n| numberOfLines | HarmonyOS TextPicker 不支持多行选项文本，自动单行截断 |\r\n| PickerItem.color | HarmonyOS TextPicker 仅支持全局 textStyle，不支持单个选项颜色 |\r\n| curtainColor | HarmonyOS TextPicker 的渐隐效果不支持自定义颜色 |\r\n| columnWidths | TextPicker 的 columnWidths 属性从 API 18 开始支持，低版本使用等分列宽兜底 |\r\n\r\n### 使用限制\r\n- 原生 Package（ETS + C++）支持 Autolink，应用的 `entry/oh-package.json5` 需要声明 Picky HAR 依赖\r\n- ArkTS 自定义组件仍需在 `Index.ets` 的 `arkTsComponentNames` 中添加 `'Picky'`，并在 `buildCustomRNComponent` 中按组件名路由渲染\r\n\r\n## 快速验证（运行 Example）\r\n\r\n### 前置条件\r\n\r\n| 依赖 | 版本要求 |\r\n|------|----------|\r\n| Node.js | >= 18 |\r\n| DevEco Studio | 5.0+ / 6.0+ |\r\n| HarmonyOS SDK | API 17+ |\r\n\r\n### 运行步骤\r\n\r\n**1. 克隆仓库**\r\n\r\n```bash\r\ngit clone <仓库地址>\r\ncd <仓库目录>\r\n```\r\n\r\n**2. 安装依赖并构建**\r\n\r\n```bash\r\nnpm install --legacy-peer-deps\r\nnpm pack # 生成 tgz 包（会自动触发 prepare 构建 JS 产物）\r\n```\r\n\r\n**3. 进入 example 目录，安装依赖**\r\n\r\n```bash\r\ncd example\r\nnpm install --legacy-peer-deps\r\n```\r\n\r\n**4. 生成 JS Bundle**\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n产物：`harmony/entry/src/main/resources/rawfile/bundle.harmony.js`\r\n\r\n**5. 用 DevEco Studio 打开鸿蒙工程**\r\n\r\n- 打开 DevEco Studio\r\n- 选择 `example/harmony` 目录\r\n- 等待 Sync 完成\r\n\r\n**6. 编译并运行 HAP**\r\n\r\n在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。\r\n\r\n> **注意**：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。\r\n\r\n## 约束与限制\r\n\r\n### 兼容性\r\n\r\n- RNOH: 0.72+\r\n- HarmonyOS SDK: API 17+\r\n- DevEco Studio: 5.0+\r\n\r\n## 遗留问题\r\n\r\n- `PickerItem.color` 不支持：HarmonyOS TextPicker 无单项颜色 API\r\n- `numberOfLines` 不支持：TextPicker 不支持多行选项文本\r\n- `curtainColor` 不支持：TextPicker 的渐隐效果不支持自定义颜色\r\n- `columnWidths` 低版本不支持：需 API17+，低版本等分列宽兜底\r\n- ArkTS 自定义组件 Builder 仍需在应用侧注册\r\n\r\n## 开源协议\r\n\r\n本项目基于 [MIT](https://github.com/Liamandrew/react-native-picky/blob/master/LICENSE) 协议，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}