@bingtang-rn/twrnc for HarmonyOS

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

版本对应关系

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

安装

npm install @bingtang-rn/twrnc

使用

import tw, { useDeviceContext, useAppColorScheme } from 'twrnc';

function App() {
  useDeviceContext(tw);

  return (
    <View style={tw`flex-1 items-center justify-center`}>
      <Text style={tw`text-blue-500 text-xl font-bold`}>
        Hello twrnc!
      </Text>
    </View>
  );
}

import 时使用原库名 'twrnc'，RNOH 通过 harmony.alias 自动映射到鸿蒙包 @bingtang-rn/twrnc。

平台差异：

• HarmonyOS 上 Platform.OS 返回 'harmony'，已添加到 PLATFORMS 数组，harmony: 前缀样式可正常生效
• 部分样式属性（如 elevation、shadowOpacity）渲染效果可能与其他平台有差异，属 RN 框架层兼容性范畴

权限要求：

• 无需任何原生权限

Link

| 版本 | 是否支持 Autolink | |------|------------------| | 当前版本 | 否（纯 JS 库，无需原生链接） |

如使用版本支持 Autolink 且工程已接入，可跳过手动配置。

说明：twrnc 为纯 JS/TS 库，无原生代码（ArkTS/C++），不需要原生链接配置。只需安装依赖即可使用。

属性 / API

| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 | |-----|------|------|--------|----------------| | tw\...`| tagged template 样式解析 | TemplateStringsArray + values | Style | ✅ 完全支持 | |tw.style()| 条件样式合并 | ...ClassInput[] | Style | ✅ 完全支持 | |tw.color()| 颜色提取 | color: string | string \| undefined | ✅ 完全支持 | |tw.prefixMatch()| 前缀匹配检测 | ...prefixes: string[] | boolean | ✅ 完全支持 | |tw.memoBuster| 设备上下文变化标识 | — | string | ✅ 完全支持 | |create()| 自定义配置创建实例 | twConfig?: TwConfig | TailwindFn | ✅ 完全支持 | |plugin()| 自定义 Tailwind 插件 | pluginFunction: PluginFunction | CreatePlugin | ✅ 完全支持 | |style| 独立导出的 tw.style | ...ClassInput[] | Style | ✅ 完全支持 | |useDeviceContext()| 设备上下文同步 Hook | tw: TailwindFn, appOptions? | void | ✅ 完全支持 | |useAppColorScheme()| 应用颜色模式控制 Hook | tw: TailwindFn | [RnColorScheme, toggle, set] | ✅ 完全支持 | |harmony:前缀 | HarmonyOS 平台专属样式 | 类名前缀 | — | ✅ 完全支持 | |dark:前缀 | 暗色模式样式 | 类名前缀 | — | ✅ 完全支持 | |sm:/md:/lg:前缀 | 断点样式 | 类名前缀 | — | ✅ 完全支持 | |portrait:/landscape:前缀 | 方向样式 | 类名前缀 | — | ✅ 完全支持 | |retina:` 前缀 | 像素密度样式 | 类名前缀 | — | ✅ 完全支持 |

平台差异

• elevation、shadowOpacity 等 RN 样式属性在 HarmonyOS 上渲染效果可能不同，属 RN 框架层兼容性范畴，非 twrnc 适配问题

使用限制

• 无

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