【鸿蒙实战开发】Fabric 自定义组件开发指南

关注

VIP免费原创最新推荐文章于 2026-05-07 09:16:52 发布 1k 阅读 AI 写同款· GEO 优化 ›

【华为SDN-Fabric】SDN控制器网络扩容操作 SDN控制器扩容操作发现设备并纳管点击【首页】—【网络规建】—【物理资源】—【设备管理】点击右侧【设备发现】——【自动发现】输入设备管理IP范围；选择snmp和netconf模板，点击【开始】创建设备组并配置选择【网络初始化】—【物理资源】—【设备组】点击【创建】，创建设备组输入设备组名称，类型根据实际情形选择多活，点击【添加】选择M-lag的两台成员设备，点击【确定】发现链路选择【网络规建】—【物理资源】—【链路管理】 —【设备间链路】点击【链路发现】选择设备阅读详情

往期知识点整理

1.编写 RN 调用 Fabric 组件的代码

编写MarqueeViewNativeComponent.tsx，注意，如果要使用 Codegen ，文件必须以NativeComponent命名。在文件中使用 codegenNativeComponent 创建 MarqueeView 组件，其中 MarqueeViewProps 里声明了 src 属性和 onStop 事件：

type OnStopEventData = Readonly<{

isStop: boolean

}>;

interface MarqueeViewProps extends ViewProps {

src: string,

onStop?: DirectEventHandler<OnStopEventData>;

}

const MarqueeView = codegenNativeComponent<MarqueeViewProps>(

'MarqueeView'

) as HostComponent<MarqueeViewProps>;

和其他标准组件的创建方式一样，在组件容器内添加 MarqueeView 标签：

<MarqueeView

src="双十一大促，消费是社会再生产过程中的一个重要环节，也是最终环节。它是指利用社会产品来满足人们各种需要的过程。"

style={
  
  {height: 180, width: '100%', backgroundColor: 'hsl(210, 80%, 50%)'}}

onStop={(e) => {

SampleTurboModule.rnLog("native调用了RN的 onStop，isStop = "+e.nativeEvent.isStop)

setMarqueeStop(e.nativeEvent.isStop)

}}

/>

2.编写ArkTS原生实现代码

Descriptor 的功能是封装 RN 侧组件代码传递到 ArkUI 组件的参数，MarqueeView 对 RN 侧公开了一个 src 参数，用于显示跑马灯的滚动内容。原生侧定义 MarqueeViewDescriptor 代码如下：

export interface MarqueeViewProps extends ViewBaseProps {

src: string

}

export type MarqueeViewDescriptor = Descriptor<"MarqueeView", MarqueeViewProps>;

Descriptor 不需要我们手动创建，由 rnoh 自动生成；组件 tag 也不需要我们手动设置，rnoh 会为组件自动分配 tag。开发者只需要通过 getDescriptor 方法获取对应 tag 的 Descriptor：

this.descriptor = this.ctx.descriptorRegistry.getDescriptor<MarqueeViewDescriptor>(this.tag)

当 RN 侧传递过来的属性参数发生变化时，我们需要更新 Descripotor：

this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (newDescriptor) => {

this.descriptor = (newDescriptor as MarqueeViewDescriptor)

})

RN 调用原生方法

RN 侧调用 UIManager.dispatchViewManagerCommand 向原生发送消息：

UIManager.dispatchViewManagerCommand(

findNodeHandle(nativeRef.current),

'toggleMarqueeState',

[],

)

原生组件通过 commandDispatcher.registerCommandCallback 接收消息并执行对应方法：

this.ctx.commandDispatcher.registerCommandCallback(this.tag, (commandName) => {

if (commandName === "toggleMarqueeState") {

this.start = !this.start

console.log("will emitComponentEvent");

}

})

原生组件调用 RN 侧方法

RN 侧添加 onStop 方法实现：

<MarqueeView

...

onStop={(e) => {

// 原生组件调用了 RN 侧的 MarqueeView 的 onStop 方法

const isStop = e.nativeEvent.isStop

...

}}

/>

原生侧发送调用 RN 组件事件的消息：

this.ctx.rnInstance.emitComponentEvent(

this.descriptor.tag,

"MarqueeView",

{ type: "onStop", isStop: !this.start }

)

buildCustomComponent

创建 RNSurface 加载 JSBundle 时，传入 buildCustomComponent 用于加载原生 Fabric 组件：

import { RNAbility, ComponentBuilderContext, RNSurface } from "rnoh";

import { MarqueeView } from '../customView/MarqueeView'

@Builder

public buildCustomComponent(ctx: ComponentBuilderContext) {

if (ctx.descriptor.type === MarqueeView.NAME) {

MarqueeView({

ctx: ctx.rnohContext,

tag: ctx.descriptor.tag

})

}

}

...

RNSurface({

...

buildCustomComponent: this.buildCustomComponent,

})

3. 编写 Codegen 的 C++ 代码

开发者可以使用Codegen生成C++侧的胶水代码，也可以手动实现这部分代码。在本节中会详细介绍如何手动实现这部分代码。

首先创建属性 Props 和事件 Emitter 两部分的 C++ 类，在 Descriptor 中进行绑定。
实现 MarqueeViewEventEmitRequestHandler 的 handleEvent 方法，根据原生消息的事件名，调用 eventEmitter 向 RN 侧组件发送事件消息。
实现 MarqueeViewJSIBinder 类的属性和事件绑定方法。
实现 MarqueeViewNapiBinder 类的属性映射方法。
将以上文件引入到 SampleTurboModulePackage 的对应方法实现中进行绑定。

Props

创建 Props 的 C++ 文件用于定义 MarqueeView 的 Descriptor 对应的属性。Props.h：

#include <jsi/jsi.h>

#include <react/renderer/components/view/ViewProps.h>

#include <react/renderer/core/PropsParserContext.h>

#include <react/debug/react_native_as