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

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

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++侧的胶水代码，也可以手动实现这部分代码。在本节中会详细介绍如何手动实现这部分代码。

1. 首先创建属性 Props 和 事件 Emitter 两部分的 C++ 类，在 Descriptor 中进行绑定。

2. 实现 MarqueeViewEventEmitRequestHandler 的 handleEvent 方法，根据原生消息的事件名，调用 eventEmitter 向 RN 侧组件发送事件消息。

3. 实现 MarqueeViewJSIBinder 类的属性和事件绑定方法。

4. 实现 MarqueeViewNapiBinder 类的属性映射方法。

5. 将以上文件引入到 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_assert.h>

namespace facebook {

namespace react {

class JSI_EXPORT MarqueeViewProps final : public ViewProps {

public:

MarqueeViewProps() = default;

MarqueeViewProps(const PropsParserContext &context, const MarqueeViewProps &sourceProps, const RawProps &rawProps);

#pragma mark - Props

std::string src{""};

};

} // namespace