React Native 跨平台鸿蒙开发实战：与鸿蒙原子化服务（Atomic Service）融合

人们眼中的天才之所以卓越非凡，并非天资超人一等而是付出了持续不断的努力。1 万小时的锤炼是任何人从平凡变成超凡的必要条件。------------ 马尔科姆·格拉德威尔

🌟 Hello，我是 Xxtaoaooo！

🌈 "代码是逻辑的诗篇，架构是思想的交响"

React Native 跨平台鸿蒙开发实战：与鸿蒙原子化服务（Atomic Service）融合

鸿蒙生态中，原子化服务（Atomic Service）（曾用名：元服务）是区别于传统 App 的核心形态。它免安装、即用即走、并在桌面上以**卡片（Service Widget）**的形式提供服务。对于 React Native (RN) 开发者来说，如何将沉重的 RN 应用与轻量级的原子化服务相结合，是提升用户留存和活跃度的关键。

一、什么是原子化服务？RN 应用如何与之共存？

原子化服务本质上是一个轻量级的 HAP 包。

形态：桌面卡片、服务中心入口。
技术栈：通常使用纯 ArkTS 开发，因为要求极致的启动速度和极小的包体积。

RN 应用（通常是重型 App）与原子化服务（轻型入口）的关系，类似于"航母"与"舰载机"。

RN App：提供完整的、深度的功能体验。
原子化服务：提供核心的、高频的信息展示和快捷操作。

1.1 融合架构图

渲染错误: Mermaid 渲染失败: Parsing failed: unexpected character: -> $\<- at offset: 45, skipped 6 characters. unexpected character: -\>\[\<- at offset: 80, skipped 8 characters. unexpected character: -\>$ <- at offset: 96, skipped 1 characters. unexpected character: -> $\<- at offset: 136, skipped 1 characters. unexpected character: -\>主\<- at offset: 140, skipped 3 characters. unexpected character: -\>$ <- at offset: 148, skipped 1 characters. unexpected character: -> $\<- at offset: 193, skipped 8 characters. Expecting: one of these possible Token sequences: 1. \[NEWLINE$ 2. $EOF$ but found: '(ArkTS)' Expecting token of type 'EOF' but found `(ArkTS)`. Expecting token of type ':' but found ` `. Expecting: one of these possible Token sequences: 1. $--$ 2. $-$ but found: ' ' Expecting token of type 'ID' but found ` `. Expecting: one of these possible Token sequences: 1. $NEWLINE$ 2. $EOF$ but found: 'R' Expecting token of type 'EOF' but found `R`. Expecting token of type ':' but found `(JS)`. Expecting: one of these possible Token sequences: 1. $--$ 2. $-$ but found: '(JS)' Expecting token of type 'ID' but found `(JS)`. Expecting token of type 'EOF' but found `(JS)`. Expecting token of type ':' but found ` `. Expecting: one of these possible Token sequences: 1. $--$ 2. $-$ but found: ' ' Expecting token of type 'ID' but found ` `.

图 1：RN 主应用与原子化服务卡片的交互架构

二、从 RN 应用跳转至原子化服务卡片

虽然原子化服务通常是独立的，但我们可以在 RN 应用中引导用户把卡片添加到桌面，或者直接拉起服务。

2.1 Native Module 实现跳转

我们需要封装一个 Native Module 来调用鸿蒙的 AbilityContext.startAbility。

typescript 复制代码

// AtomicServiceModule.ts
import wantConstant from '@ohos.ability.wantConstant'

export class AtomicServiceModule extends RNModule {
  openService(serviceId: string) {
    let want = {
      bundleName: 'com.example.atomicservice',
      abilityName: 'EntryAbility',
      flags: wantConstant.Flags.FLAG_INSTALL_ON_DEMAND, // 支持免安装拉起
      parameters: {
        pageId: 'detail',
        productId: '12345',
      },
    }
    this.context
      .startAbility(want)
      .then(() => {
        // 拉起成功
      })
      .catch((err) => {
        // 处理错误
      })
  }
}

2.2 JS 侧调用

javascript 复制代码

import { NativeModules } from 'react-native'

const openProductCard = () => {
  NativeModules.AtomicService.openService('com.example.atomicservice')
}

三、共享用户状态与上下文

最常见的痛点是：用户在 RN App 中登录了，打开原子化服务卡片时，应该是已登录状态。这涉及到数据共享。

3.1 方案选型：App Group 数据共享

鸿蒙提供了 dataGroupId 机制，允许同一开发者账号下的不同应用（主应用和元服务）共享文件路径。

配置：在 app.json5 中配置 dataGroupId。
Native 侧实现 ：使用 context.getGroupDir(dataGroupId) 获取共享目录。
RN 侧封装：

我们需要编写一个 Native Module 来读写这个共享目录下的文件（如 token.json）。

typescript 复制代码

// SharedStorageModule.ts
import fs from '@ohos.file.fs'

class SharedStorageModule extends RNModule {
  saveToken(token: string) {
    let groupDir = this.context.getGroupDir('YOUR_GROUP_ID')
    let file = fs.openSync(
      groupDir + '/token.txt',
      fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE
    )
    fs.writeSync(file.fd, token)
    fs.closeSync(file)
  }
}

3.2 场景示例：电商应用"一键加购"

场景：用户在 RN App 浏览商品 -> 点击"添加到桌面卡片" -> 桌面出现该商品的降价监控卡片 -> 卡片显示降价 -> 点击卡片直接跳回 RN App 结算页。
原子化服务后端服务用户系统浏览与添加浏览与添加用户在 RN App 浏览商品在 RN App 浏览商品用户点击"添加价格监控" 点击"添加价格监控" 系统弹出添加到桌面选项弹出添加到桌面选项卡片交互卡片交互原子化服务桌面显示商品卡片桌面显示商品卡片后端服务商品降价推送商品降价推送原子化服务卡片更新价格卡片更新价格回流转化回流转化用户点击卡片购买按钮点击卡片购买按钮系统拉起 RN App 结算页拉起 RN App 结算页用户完成支付完成支付用户从 RN App 到原子化服务的旅程

图 2：电商场景下的 RN 与元服务闭环体验

四、实现"添加到桌面"功能

在 RN App 内部，我们可以调用 formBindingData 和 formHost 相关的能力（需封装），请求用户将当前的 Widget 添加到桌面。

typescript 复制代码

// RequestAddFormModule.ts
import formHost from '@ohos.app.form.formHost';

// 请求添加卡片到桌面
requestAddForm() {
  let want = {
    bundleName: "com.example.atomicservice",
    abilityName: "FormAbility",
    parameters: {
      "ohos.extra.param.key.form_dimension": 2 // 2*2 卡片
    }
  };
  formHost.requestForm(want).then((formId) => {
    console.info('Add form success');
  });
}

通过这种方式，React Native 应用不再是一个信息的孤岛，而是通过原子化服务，将触角延伸到了用户的桌面和负一屏，极大地提高了信息的触达率。

🌟 嗨，我是 Xxtaoaooo！

⚙️ 【点赞】让更多同行看见深度干货

🚀 【关注】持续获取行业前沿技术与经验

🧩 【评论】分享你的实战经验或技术困惑

作为一名技术实践者，我始终相信：

每一次技术探讨都是认知升级的契机，期待在评论区与你碰撞灵感火花 🔥

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net