鸿蒙开发实践——C-API版本XComponent接入

猫猫码代码

于 2025-06-24 19:53:21 发布

阅读量218

点赞数 3

CC 4.0 BY-SA版权

文章标签： c语言 harmonyos 鸿蒙开发移动开发

本文链接：https://blog.youkuaiyun.com/android__bye/article/details/148877056

C-API 版本使用XComponent总共分成了两个步骤：

createSurface的时候创建XComponentSurface;
startSurface的时候将CPP的XComponentSurface连接到ArkUI的Xcomponent上。

createSurface的时候主要做了以下的操作：

创建并将XComponentSurface记录到Map中：

void RNInstanceCAPI::createSurface(facebook::react::Tag surfaceId, std::string const& moduleName) {
  m_surfaceById.emplace(
    surfaceId,
    XComponentSurface(
      // ···
    surfaceId,
    moduleName)
  );
}

在XComponentSurface中创建rootView，用于挂载C-API的组件，并在Surface上统一处理Touch事件：

XComponentSurface::XComponentSurface(
//···
SurfaceId surfaceId,
std::string const& appKey)
: 
  //···
  m_nativeXComponent(nullptr),
  m_rootView(nullptr),
  m_surfaceHandler(SurfaceHandler(appKey, surfaceId)) {
    m_scheduler->registerSurface(m_surfaceHandler);
    m_rootView = componentInstanceFactory->create(
      surfaceId, facebook::react::RootShadowNode::Handle(), "RootView");
    m_componentInstanceRegistry->insert(m_rootView);
    m_touchEventHandler = std::make_unique<SurfaceTouchEventHandler>(m_rootView);
  }

startSurface的时候主要做了以下的操作：

在ArkTS侧创建XComponent，并设置id，type与libraryname属性。其中：

id：组件的唯一标识，又由InstanceID和SurfaceID共同组成，记录了此XComponent属于哪一个Instance与Surface；
type：node，标识该XComponent是一个占位组件，组件的实现都在C-API侧；
libraryname：表示C-API组件在哪个so库中实现，并加载该so库，自动调用该so中定义的Init函数。当前React Native for OpenHarmony默认的so名字rnoh_app。

XComponent({
    id: this.ctx.rnInstance.getId() + "_" + this.surfaceHandle.getTag(),
    type: "node",
    libraryname: 'rnoh_app'
})

在CPP侧的Init中调用registerNativeXComponent函数，该函数中调用了OH_NativeXComponent_GetXComponentId用于获取ArkTS设置的id，并根据id找到对应的Instance与Surface。同时还要获取nativeXComponent对象，记录ArkTS侧的XComponent。

if (OH_NativeXComponent_GetXComponentId(nativeXComponent, idStr, &idSize) !=
  OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
    ···
}
std::string xcomponentStr(idStr);
std::stringstream ss(xcomponentStr);
std::string instanceId;
std::getline(ss, instanceId, '_');
std::string surfaceId;
std::getline(ss, surfaceId, '_');

调用

OH_NativeXComponent_AttachNativeRootNode(
    nativeXComponent,
    rootView.getLocalRootArkUINode().getArkUINodeHandle());

写在最后

如果你觉得这篇内容让你有所收获，我想请你帮我三个小忙~

点赞，转发，你们的『点赞和评论』，是我创造的动力；
关注小编，不定期分享技术知识
同时请期待后续文章ing🚀