前阵子有个做跨端开发的朋友问我:现在鸿蒙OS都走到这一步了,React Native到底能不能在鸿蒙上跑?我的回答是不仅能跑,而且如果你愿意把鸿蒙原生组件和分布式能力通过RN暴露给JS侧,还能玩出不少花活。这篇文章就围绕“在React Native中开发鸿蒙组件”这件事,把鸿蒙开发的基础概念、RN工程如何集成鸿蒙应用、以及分布式能力如何接入RN业务层一条线讲清楚。适合正在做技术选型、已经拿到鸿蒙设备准备动手、或者纯粹想搞清楚“RN和鸿蒙到底是什么关系”的开发者。
先泼一盆冷水:RN适配鸿蒙这件事,不像Android和iOS那样“开箱即用”,整个链路从工程结构到原生模块写法都有不少差异。但反过来想,正因为鸿蒙原生生态还在快速演进,现在能把RN和鸿蒙打通的团队,后面反而有先发优势。下面我按自己实际趟过的路径来写,从基础认知到工程搭建,再到原生组件开发和分布式能力接入,最后是踩坑记录,每一步都尽量说清楚为什么。
1. 先弄明白:鸿蒙OS跟Android/iOS到底差在哪,RN适配依赖什么
1.1 OpenHarmony与HarmonyOS的关系
很多RN开发者第一次接触鸿蒙时,会被一串名词搞混:OpenHarmony、HarmonyOS、HarmonyOS NEXT、API版本、SDK版本……这里先做一个最简单的切分。
OpenHarmony是开源底座,相当于一个通用的操作系统内核与基础框架,谁都可以拿去做发行版。HarmonyOS是华为基于OpenHarmony打造的商用操作系统,普通消费者和设备厂商拿到的是这一层。RN要适配鸿蒙,核心适配对象其实是OpenHarmony的能力接口,因为无论是哪种发行版,底层暴露给上层应用的能力走向是一致的。
对RN开发者来说,真正要关注的是“API版本”和“SDK版本”。鸿蒙API版本的迭代速度非常快,不同版本之间的接口变化可能很大。社区里现有的RN适配方案,往往只针对某个API版本做了完整验证。你在拉依赖之前,先确认自己准备用哪个API Level,否则很容易出现编译过了但运行时崩溃的情况。
1.2 Stage模型与Ability:鸿蒙原生应用的基本单位
Android开发者对Activity很熟,iOS开发者对UIViewController很熟,鸿蒙里对应的核心概念叫Ability。新一代鸿蒙应用模型叫Stage模型,应用由多个Ability组成,其中带页面的叫UIAbility,不带页面的叫ServiceExtensionAbility之类。
RN集成鸿蒙时,通常做法是把RN容器包装在一个JavaScriptAbility里,或者直接挂在某个UIAbility的页面中。不要试图用Android的Activity思维去套,鸿蒙Ability的启动方式、生命周期回调、任务栈规则都不一样。我刚开始做集成时,把RN实例的创建和销毁直接绑在自定义的页面生命周期上,结果发现鸿蒙的UIAbility在系统资源紧张时会被整体回收,不像Android那样有onSaveInstanceState帮你兜底,后面这块踩了不少坑。
1.3 ArkTS与ArkUI:声明式UI的另一种表达
如果你是从React Native、Flutter或者SwiftUI过来的,看到ArkUI应该不会太陌生。ArkUI采用声明式UI写法,用ArkTS语言描述界面结构。ArkTS是TypeScript的超集,语法上限制了一些动态特性,换来的是更好的编译期检查和性能收益。
在RN鸿蒙适配的语境下,有一个很关键的认知:你在RN侧写的JavaScript/TypeScript代码,完全不需要关心ArkUI怎么写,但你要开发的鸿蒙原生组件,必须用ArkTS和ArkUI实现。 也就是说,技术栈是“JS写业务 + ArkTS写原生”。这两套东西在同一个工程里共存,靠的是RN适配框架做桥接。
1.4 分布式能力是鸿蒙的隐藏加分项
标题里特别提到了“分布式操作系统”,这确实是鸿蒙区别于传统移动OS的核心特性。分布式软总线、分布式数据管理、分布式任务调度这些能力,在Android和iOS上很难找到对等物。但对RN开发者来说,这些能力默认是暴露不到JS侧的,你需要自己写鸿蒙原生模块,把它们封装成RN能调用的接口——这正是“开发鸿蒙组件”这件事最有价值的部分。
我见过不少团队集成RN到鸿蒙,只做到“能跑一个JS页面”就停了,完全没碰分布式能力。虽然也能交差,但等于主动放弃了鸿蒙最有差异化的卖点。下文第四节会展开讲讲怎么把分布
