{"_id":"@bingtang-rn/react-native-autogrow-textinput","_rev":"2-b5cb4dbc2106f7abdaa09d15c0fc90f2","name":"@bingtang-rn/react-native-autogrow-textinput","dist-tags":{"latest":"5.4.1"},"versions":{"5.4.0":{"name":"@bingtang-rn/react-native-autogrow-textinput","version":"5.4.0","keywords":["react-native","harmony","harmonyos","react-native-autogrow-textinput"],"license":"MIT","_id":"@bingtang-rn/react-native-autogrow-textinput@5.4.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_autogrow_textinput","dist":{"shasum":"4e8b98e5ebf2e7616074c8d674cb536c1f814dcf","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-autogrow-textinput/-/react-native-autogrow-textinput-5.4.0.tgz","fileCount":32,"integrity":"sha512-3aVwY4pZ315fzT60GynIAe0s5so6s2+0ABRepRQfSl9e7nK1Y6nMJRakdB4wAka7BgZnaeZyQlgWJ8MoUbd1tA==","signatures":[{"sig":"MEUCIQDs7ggDZKS7Ww+b4xCrGnuYfm1MM6OR4vUsi5Mn/rGBBQIgITJ6uLcuVyG1Hgl93xQFLsLEU8xU0tHv1A5hpM7J1Iw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44326},"main":"./src/index.js","module":"./src/index.js","engines":{"node":">=18"},"gitHead":"61301f4b9cf7b0875ca1a6baad0c22ddfff52d44","harmony":{"alias":"react-native-autogrow-textinput","autolinking":{"ohPackageName":"@oh-rn/react-native-autogrow-textinput","cppPackageClassName":"AutogrowTextinputPackage","etsPackageClassName":"AutogrowTextinputPackage","cmakeLibraryTargetName":"autogrow_textinput"},"codegenConfig":[{"version":1,"specPaths":["./src/specs/v1"]}]},"private":false,"scripts":{"prepare":"echo skip","codegen-lib":"react-native codegen-harmony --cpp-output-path ./harmony/autogrow_textinput/src/main/cpp/generated --ets-output-path ./harmony/autogrow_textinput/src/main/ets/generated"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_autogrow_textinput","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_autogrow_textinput组件。","directories":{},"_nodeVersion":"24.15.0","react-native":"./src/index.js","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-autogrow-textinput_5.4.0_1785418031900_0.1589890942582115","host":"s3://npm-registry-packages-npm-production"}},"5.4.1":{"_id":"@bingtang-rn/react-native-autogrow-textinput@5.4.1","dist":{"shasum":"8a759ab1fe10273faac6d9442613637c3c50e061","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-autogrow-textinput/-/react-native-autogrow-textinput-5.4.1.tgz","fileCount":32,"integrity":"sha512-v+4vtisgGTC/3g8uyYxW4davCZu1tlV/ou62uyN4rRzipmDLRyAeoYx3ObkBV+EZkcXH3UdvI5F4RVLQZB4MsQ==","signatures":[{"sig":"MEYCIQDHkq54FqEPbwEig8I3HNar2B9wS/Tal/tL/wQ+gOeBVAIhAL6ZBWH5/BT6LQy8XV4MMQfDrsGZZXbVxvG5yHq1fZj6","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEPM7vr5q3tlt0P63k3CSD4KN+/xjpW1dTpsntcYLEifAiAfwjv5ND05pFil0fQZZTO7HwzH22q+Y30t+8RNWtKUaA=="}],"unpackedSize":44441},"main":"./src/index.js","name":"@bingtang-rn/react-native-autogrow-textinput","_from":"file:bingtang-rn-react-native-autogrow-textinput-5.4.1.tgz","module":"./src/index.js","engines":{"node":">=18"},"harmony":{"alias":"react-native-autogrow-textinput","autolinking":{"ohPackageName":"@bingtang-rn/react-native-autogrow-textinput","cppPackageClassName":"AutogrowTextinputPackage","etsPackageClassName":"AutogrowTextinputPackage","cmakeLibraryTargetName":"autogrow_textinput"},"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/autogrow_textinput/src/main/cpp/generated --ets-output-path ./harmony/autogrow_textinput/src/main/ets/generated"},"version":"5.4.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_autogrow_textinput","keywords":["react-native","harmony","harmonyos","react-native-autogrow-textinput"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_autogrow_textinput\\bingtang-rn-react-native-autogrow-textinput-5.4.1.tgz","_integrity":"sha512-v+4vtisgGTC/3g8uyYxW4davCZu1tlV/ou62uyN4rRzipmDLRyAeoYx3ObkBV+EZkcXH3UdvI5F4RVLQZB4MsQ==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_autogrow_textinput","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_autogrow_textinput组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","react-native":"./src/index.js","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-autogrow-textinput_5.4.1_1790568505531_0.7149556404193427"}}},"time":{"created":"2026-07-30T13:26:56.473Z","modified":"2026-09-28T04:08:25.816Z","5.4.0":"2026-07-30T13:27:12.064Z","5.4.1":"2026-09-28T04:08:25.620Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_autogrow_textinput","keywords":["react-native","harmony","harmonyos","react-native-autogrow-textinput"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_autogrow_textinput","type":"git"},"description":"适配鸿蒙版本，提供react_native_autogrow_textinput组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-autogrow-textinput for HarmonyOS\r\n\r\n本项目基于 [react-native-autogrow-textinput](https://github.com/wix/react-native-autogrow-textinput) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_autogrow_textinput/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 1.0.0 | 5.4.0 | 0.72+ | 是 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-autogrow-textinput\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport {AutoGrowingTextInput} from 'react-native-autogrow-textinput';\r\n\r\n// 基本用法：多行自适应高度输入框\r\n<AutoGrowingTextInput\r\n  value={text}\r\n  onChange={(e) => setText(e.nativeEvent.text || '')}\r\n  style={inputStyle}\r\n  placeholder=\"Your Message\"\r\n  placeholderTextColor=\"#66737C\"\r\n  maxHeight={200}    // 高度上限，超出后内容滚动\r\n  minHeight={48}     // 最小高度\r\n  enableScrollToCaret // 输入时光标可见（鸿蒙 TextArea 原生跟随）\r\n  ref={inputRef}\r\n/>\r\n\r\n// 清空文本并重置高度\r\ninputRef.current?.clear();\r\ninputRef.current?.resetHeightToMin();\r\n\r\n// 焦点控制\r\ninputRef.current?.focus();\r\ninputRef.current?.blur();\r\ninputRef.current?.isFocused();\r\n```\r\n\r\n> import 时使用原库名 `'react-native-autogrow-textinput'`，而非鸿蒙包名（由 RNOH alias 自动映射）。\r\n\r\n**平台差异**：\r\n- HarmonyOS 上多行自适应高度（autogrow）由鸿蒙 `TextArea` 原生支持（高度未设置时自适应内容高度）。\r\n- `maxHeight` / `minHeight` 通过 `style` 传入 Yoga 布局引擎约束高度，超出后 `TextArea` 内容自身滚动。\r\n- `enableScrollToCaret` 的光标可见行为由鸿蒙 `TextArea` 原生保证（`onContentScroll` + `TextAreaController.caretPosition`），无需外层 ScrollView 显式滚动。\r\n- `resetKeyboardInput` 为 Android 专属临时 hack（重置输入法修复预测文本问题），鸿蒙端无对应问题，空实现保留接口契约；JS 层 `clear()` 仅在 `Platform.OS === 'android'` 时调用该方法，鸿蒙不走该分支。\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<details>\r\n<summary>Manual Link 配置</summary>\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-autogrow-textinput\": \"file:../../node_modules/@bingtang-rn/react-native-autogrow-textinput/harmony/autogrow_textinput.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-autogrow-textinput/src/main/cpp\" ./autogrow_textinput)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC autogrow_textinput)\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 \"AutogrowTextinputPackage.h\"\r\n\r\nstd::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {\r\n    return {\r\n        std::make_shared<AutogrowTextinputPackage>(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 { AutogrowTextinputPackage } from '@bingtang-rn/react-native-autogrow-textinput/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n  return [\r\n    new AutogrowTextinputPackage(ctx),\r\n  ];\r\n}\r\n```\r\n\r\n</details>\r\n\r\n## 属性 / API\r\n\r\n| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |\r\n|-----|------|------|--------|----------------|\r\n| AutoGrowingTextInput | 多行自适应高度输入框组件（默认导出，继承 TextInput 全部 props） | TextInput props + enableScrollToCaret/maxHeight/minHeight | React 组件 | ✅ 完全支持 |\r\n| enableScrollToCaret | 输入时光标可见滚动跟随 | boolean（默认 false） | — | ✅ 完全支持（鸿蒙 TextArea 原生跟随光标） |\r\n| maxHeight | 自适应高度上限，超出后内容滚动 | number | — | ✅ 完全支持（经 style 传入 Yoga 约束高度） |\r\n| minHeight | 最小高度 | number | — | ✅ 完全支持（经 style 传入 Yoga 约束高度） |\r\n| setNativeProps | 动态设置原生属性 | nativeProps: object | void | ✅ 完全支持（转发 TextInput） |\r\n| resetHeightToMin | 重置高度到最小 | 无 | void | ✅ 完全支持（setNativeProps({text:''})） |\r\n| clear | 清空文本 | 无 | void | ✅ 完全支持（鸿蒙不走 resetKeyboardInput 分支） |\r\n| focus | 获取焦点 | 无 | void | ✅ 完全支持 |\r\n| blur | 失去焦点 | 无 | void | ✅ 完全支持 |\r\n| isFocused | 查询是否聚焦 | 无 | boolean | ✅ 完全支持 |\r\n| getRef | 获取内部 TextInput ref | 无 | TextInput ref | ✅ 完全支持 |\r\n| applySettingsForInput | 给目标 TextInput 注册 autogrow 设置 | reactTag: number, settings: {enableScrollToCaret: boolean, maxHeight?: number} | void | ✅ 完全支持（按 tag 记录配置） |\r\n| performCleanupForInput | 清理 TextInput 上注册的设置 | reactTag: number | void | ✅ 完全支持（Map.delete 释放引用） |\r\n| resetKeyboardInput | 重置输入法（Android-only hack） | reactTagToReset: number | void | ⚠️ 部分支持（鸿蒙空实现保留契约，JS 层仅 Android 调用） |\r\n\r\n### 平台差异\r\n\r\n- **autogrow 高度自适应**：鸿蒙 `TextArea`「高度未设置时自适应内容高度」（API17+），RN4OH multiline TextInput 基于 TextArea 实现，autogrow 行为天然复现，无需原生侧测量。\r\n- **enableScrollToCaret**：原 iOS/Android 需外层 ScrollView 显式滚动到光标；鸿蒙 `TextArea` 自身内容超出可视区已支持滚动并跟随光标，光标可见行为由原生组件保证，外层显式滚动为多余。\r\n- **maxHeight**：原库由原生模块跟踪 mMaxHeight 并控制滚动；鸿蒙端经 `style` 传入 Yoga 布局引擎约束高度，超出后 TextArea 内容自身滚动，用户可见效果对等。\r\n\r\n### 未实现功能\r\n\r\n无。所有公开 API 均已实现，`resetKeyboardInput` 的鸿蒙端空实现属平台差异（非未实现），保留接口契约。\r\n\r\n### 使用限制\r\n\r\n- 无权限要求。\r\n- `Platform.OS` 判断鸿蒙端返回 `'harmony'`，使用显式 `=== 'harmony'` 判断。\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无（或列出已知问题）\r\n\r\n## 开源协议\r\n\r\n本项目基于 [MIT](https://github.com/wix/react-native-autogrow-textinput/blob/master/LICENSE)，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}