@bingtang-rn/react-native-autogrow-textinput for HarmonyOS

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

版本对应关系

| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 | | ------------ | ---------- | ------------ | -------- | ------------- | | 1.0.0 | 5.4.0 | 0.72+ | 是 | API17+ |

安装

npm install @bingtang-rn/react-native-autogrow-textinput

使用

import {AutoGrowingTextInput} from 'react-native-autogrow-textinput';

// 基本用法：多行自适应高度输入框
<AutoGrowingTextInput
  value={text}
  onChange={(e) => setText(e.nativeEvent.text || '')}
  style={inputStyle}
  placeholder="Your Message"
  placeholderTextColor="#66737C"
  maxHeight={200}    // 高度上限，超出后内容滚动
  minHeight={48}     // 最小高度
  enableScrollToCaret // 输入时光标可见（鸿蒙 TextArea 原生跟随）
  ref={inputRef}
/>

// 清空文本并重置高度
inputRef.current?.clear();
inputRef.current?.resetHeightToMin();

// 焦点控制
inputRef.current?.focus();
inputRef.current?.blur();
inputRef.current?.isFocused();

import 时使用原库名 'react-native-autogrow-textinput'，而非鸿蒙包名（由 RNOH alias 自动映射）。

平台差异：

• HarmonyOS 上多行自适应高度（autogrow）由鸿蒙 TextArea 原生支持（高度未设置时自适应内容高度）。
• maxHeight / minHeight 通过 style 传入 Yoga 布局引擎约束高度，超出后 TextArea 内容自身滚动。
• enableScrollToCaret 的光标可见行为由鸿蒙 TextArea 原生保证（onContentScroll + TextAreaController.caretPosition），无需外层 ScrollView 显式滚动。
• resetKeyboardInput 为 Android 专属临时 hack（重置输入法修复预测文本问题），鸿蒙端无对应问题，空实现保留接口契约；JS 层 clear() 仅在 Platform.OS === 'android' 时调用该方法，鸿蒙不走该分支。

权限要求：

• 无。本库不涉及任何原生权限。

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

target_link_libraries(rnoh_app PUBLIC autogrow_textinput)

4. 注册 Package（C++ 侧）

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

#include "AutogrowTextinputPackage.h"

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

5. 注册 Package（ETS 侧）

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

import { AutogrowTextinputPackage } from '@bingtang-rn/react-native-autogrow-textinput/ts';

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

属性 / API

| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 | |-----|------|------|--------|----------------| | AutoGrowingTextInput | 多行自适应高度输入框组件（默认导出，继承 TextInput 全部 props） | TextInput props + enableScrollToCaret/maxHeight/minHeight | React 组件 | ✅ 完全支持 | | enableScrollToCaret | 输入时光标可见滚动跟随 | boolean（默认 false） | — | ✅ 完全支持（鸿蒙 TextArea 原生跟随光标） | | maxHeight | 自适应高度上限，超出后内容滚动 | number | — | ✅ 完全支持（经 style 传入 Yoga 约束高度） | | minHeight | 最小高度 | number | — | ✅ 完全支持（经 style 传入 Yoga 约束高度） | | setNativeProps | 动态设置原生属性 | nativeProps: object | void | ✅ 完全支持（转发 TextInput） | | resetHeightToMin | 重置高度到最小 | 无 | void | ✅ 完全支持（setNativeProps({text:''})） | | clear | 清空文本 | 无 | void | ✅ 完全支持（鸿蒙不走 resetKeyboardInput 分支） | | focus | 获取焦点 | 无 | void | ✅ 完全支持 | | blur | 失去焦点 | 无 | void | ✅ 完全支持 | | isFocused | 查询是否聚焦 | 无 | boolean | ✅ 完全支持 | | getRef | 获取内部 TextInput ref | 无 | TextInput ref | ✅ 完全支持 | | applySettingsForInput | 给目标 TextInput 注册 autogrow 设置 | reactTag: number, settings: {enableScrollToCaret: boolean, maxHeight?: number} | void | ✅ 完全支持（按 tag 记录配置） | | performCleanupForInput | 清理 TextInput 上注册的设置 | reactTag: number | void | ✅ 完全支持（Map.delete 释放引用） | | resetKeyboardInput | 重置输入法（Android-only hack） | reactTagToReset: number | void | ⚠️ 部分支持（鸿蒙空实现保留契约，JS 层仅 Android 调用） |

平台差异

• autogrow 高度自适应：鸿蒙 TextArea「高度未设置时自适应内容高度」（API17+），RN4OH multiline TextInput 基于 TextArea 实现，autogrow 行为天然复现，无需原生侧测量。
• enableScrollToCaret：原 iOS/Android 需外层 ScrollView 显式滚动到光标；鸿蒙 TextArea 自身内容超出可视区已支持滚动并跟随光标，光标可见行为由原生组件保证，外层显式滚动为多余。
• maxHeight：原库由原生模块跟踪 mMaxHeight 并控制滚动；鸿蒙端经 style 传入 Yoga 布局引擎约束高度，超出后 TextArea 内容自身滚动，用户可见效果对等。

未实现功能

无。所有公开 API 均已实现，resetKeyboardInput 的鸿蒙端空实现属平台差异（非未实现），保留接口契约。

使用限制

• 无权限要求。
• Platform.OS 判断鸿蒙端返回 'harmony'，使用显式 === 'harmony' 判断。

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