HarmonyOS 鸿蒙Next RN上开发页面,需要用arkTs原生组件和RN混合渲染,可以支持吗

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next RN上开发页面,需要用arkTs原生组件和RN混合渲染,可以支持吗

鸿蒙RN上开发页面,需要用arkTs原生组件和RN混合渲染,可以支持吗

页面上方和下方用RN开发组件,中间是原生的组件,是否支持

2 回复
export interface MarqueeViewProps extends ViewBaseProps {
  src: string
}
export type MarqueeViewDescriptor = Descriptor<"MarqueeView", MarqueeViewProps>;

编写 Codegen 的 C++ 代码


在 RNOH 的 Codegen ⼯具提供给开发者之前,需要开发者⼿动添加在其他平台上由 Codegen ⽣
成的 C++ 代码。
⾸先创建属性 Props 和 事件 Emitter 两部分的 C++ 类,在 Descriptor 中进⾏绑定。
实现 MarqueeViewEventEmitRequestHandler 的 handleEvent ⽅法,根据原⽣消息的事件
名,调⽤ eventEmitter 向 RN 侧组件发送事件消息。
实现 MarqueeViewJSIBinder 类的属性和事件绑定⽅法。
实现 MarqueeViewNapiBinder 类的属性映射⽅法。
将以上⽂件引⼊到 SampleTurboModulePackage 的对应⽅法实现中进⾏绑定


编写 RN 调⽤ Fabric 组件
type OnStopEventData = Readonly<{
  isStop: boolean
}>;
interface MarqueeViewProps extends ViewProps {
  src: string,
  onStop?: DirectEventHandler<OnStopEventData>;
}
const MarqueeView = codegenNativeComponent<MarqueeViewProps>(
  'MarqueeView'
) as HostComponent<MarqueeViewProps>;


<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)
}}
/>

HarmonyOS 鸿蒙Next RN上开发页面,支持使用ArkTS原生组件和RN混合渲染

HarmonyOS提供了强大的混合模式开发支持,允许开发者在同一应用中结合使用不同的技术栈。在鸿蒙Next版本中,RN框架可以用于构建高性能、跨平台的移动应用界面,而ArkTS则提供了原生组件的渲染能力。

开发者可以通过JSBridge等通信机制,实现RN与ArkTS原生组件之间的数据交互和渲染协调。这种混合渲染模式能够充分利用原生组件的高性能优势,同时保持RN框架的跨平台开发便利性。

在具体实现时,开发者需要注意组件间的通信和数据同步问题,确保RN与ArkTS原生组件能够无缝协作。此外,还需要关注应用的性能优化和内存管理,以避免因混合渲染带来的潜在问题。

如果开发者在混合渲染过程中遇到技术难题或兼容性问题,建议查阅HarmonyOS官方文档或开发者社区的相关资源。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部