鸿蒙rn(react native)自定义TurboModule

鸿蒙原生框架对标安卓,ios

react native作为react的移动端框架,大厂使用较多,在此基础,分享一下鸿蒙rn的桥接过程

主体流程:

鸿蒙提供原生api支持(需遵循 RN TurboModule 的接口规范,用 C++/ArkTS 编写模块,暴露供 RN 调用的方法 / 常量 / 回调),rn侧通过编写js接口文件,基于codegen生成胶水代码并引入工程,实现将原生模块注册到createRNPackages,完成鸿蒙到rn的方法对接

以下demo详细步骤:

rn侧编写接口,需通过turboModuleRegistry找到对应的注册模块

文件命名以Native为开头,如:NativeModule

index.ts导出接口模块

package.json配置相关信息(如下图),以此生成对应版本的tgz包:

命令:npm pack

项目根目录的package.json需导入tgz包,并添加codegen相关script,npm i 安装依赖

"codegen": "react-native codegen-harmony --cpp-output-path ./entry/src/main/cpp/generated --rnoh-module-path ./entry/oh_modules/@rnoh/react-native-openharmony"

配置完成后执行命令 npm run coedegn 生成对应generated文件,文件内包含鸿蒙所需胶水代码(不懂c++不要紧,按照步骤来就行)

-------------------------------------在此rn侧配置完成,下面做鸿蒙侧处理------------------------

鸿蒙侧需将rn侧生成胶水代码引入,并完成原生模块的编写到注册

首先将codegen生成的文件放到下图文件对应位置:

  1. AwesomeProject/entry/src/main/cpp下的generated,放在工程目录 entry/src/main/cpp
  2. AwesomeProject/entry/oh_modules/@rnoh/react-native-openharmony下的generated
  • 官网默认放在工程目录的entry/oh_modules/@rnoh/react-natvie-openharmony下(优点无需改动,缺点,删除依赖清理缓存后需重新拷贝)
  • 也可以放在工程目录 entry/src/main/ets下,需要将内部导入路径进行修改(例如:下图ts的引入路径改为@rnoh/react-native-openharmony/ts)

在 entry/src/main/cpp/CMakeLists.txt 中定义 cpp 的 generated 路径,并添加到编译构建中:

在 entry/src/main/cpp/PackageProvider.cpp 中创建 cpp 侧的 package 对象:

下一步:原生侧在entry/src/ets下新建turbomodule文件夹,并完成RTNWechatModule.ets编写,实现原生方法的

import { UITurboModule } from '@rnoh/react-native-openharmony/ts';
import { TM } from '../generated/ts';
export class RTNWechatModule extends UITurboModule implements TM.RTNWechat.Spec {      isLogin(): Promise<boolean> {
     return new Promise(resolve=>{
              return resolve(true)    
           })  
      }
}

然后,新建GeneratedPackage.ets文件

在RNPackageFactory中注册自定义模块,createRNPackages:是rnInstanceConfig核心子配置项,外部功能包管理(向框架提供额外的功能特性)

至此鸿蒙侧操作完成,rn侧调用方法即可

使用demo:

全部评论

相关推荐

评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务