如何在原生鸿蒙APP中使用RN的bundle包

一、创作背景

上一篇博客中,我给大家分享了如何创建一个RN的项目,并且解决了其中的问题点,成功打出了Bundle包。接下来就是我给大家分享一下,如何在原生鸿蒙项目中使用那个Bundle包,这一篇分享完才算是开发环境真正的搭建好了。

在本篇中,我将继续分享环境搭建中会遇到的坑点,帮助大家快速搭建成功。

二、搭建鸿蒙原生RN的原生项目部分

1、创建一个普通的鸿蒙原生项目

2、复制鸿蒙tgz包到项目中

在RN项目最外层新建2个文件夹,分别为react-native-harmony以及react-native-harmony-cli。然后将鸿蒙的相应这2个tgz包分别放入相应文件夹中,目录层级大概是这样子:

3、关联鸿蒙tgz文件

打开package.json,在dependencies中关联上前面新建的tgz包

4、关联openharmony包

在鸿蒙项目的根目录中,新建一个libs文件夹。

将官方提供的openharmony包复制进去,如下图。

接下来修改一下原生项目的oh-package.json文件,关联一下刚刚复制进去的openharmony包。

5、安装鸿蒙所需的依赖

打开命令行,进入原生项目的根目录,运行ohpm install命令。

如果报下面的错误,说明上一步,关联包有问题,找不到包:

如果安装依赖成功,命令行会是下面这样子:

此时进入鸿蒙原生项目中查看,会发现多了ohpm_module的文件夹:

6、补充C++侧代码

  1. MyApplication/entry/src/main 目录下新建 cpp 文件夹。

  2. 在 cpp 目录下新增 CMakeLists.txt,并将 RNOH 的适配层代码添加到编译构建中生成 librnoh_app.so

    scss 复制代码
    project(rnapp)
    cmake_minimum_required(VERSION 3.4.1)
    set(CMAKE_SKIP_BUILD_RPATH TRUE)
    set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
    set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
    
    set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/src/main/cpp")
    set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
    set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
    set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
    add_compile_definitions(WITH_HITRACE_SYSTRACE)
    set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
    
    add_subdirectory("${RNOH_CPP_DIR}" ./rn)
    
    add_library(rnoh_app SHARED
        "./PackageProvider.cpp"
        "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
    )
    
    target_link_libraries(rnoh_app PUBLIC rnoh)
  3. 在 cpp 目录下新增 PackageProvider.cpp,将以下代码直接复制进去即可

    arduino 复制代码
    #include "RNOH/PackageProvider.h"
    
    using namespace rnoh;
    
    std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
        return {};
    }
  4. 打开 MyApplicaton\entry\build-profile.json5,将以下代码直接复制进去即可:

    json 复制代码
    {
     "apiType": "stageMode",
     "buildOption": {
    +   "externalNativeOptions": {
    +      "path": "./src/main/cpp/CMakeLists.txt",
    +      "arguments": "",
    +      "cppFlags": "",
    +    }
     },
     "buildOptionSet": [
       {
         "name": "release",
         "arkOptions": {
           "obfuscation": {
             "ruleOptions": {
               "enable": true,
               "files": [
                 "./obfuscation-rules.txt"
               ]
             }
           }
         }
       },
     ],
     "targets": [
       {
         "name": "default"
       },
       {
         "name": "ohosTest",
       }
     ]
    }

7、补充arkts侧代码

  1. 打开 MyApplicaton\entry\src\main\ets\entryability\EntryAbility.ets,之前默认是继承自UIAbility,这里要改成继承RNAbility。并且需要重写 getPagePath,返回程序的入口 page。

    scala 复制代码
    import { RNAbility } from '@rnoh/react-native-openharmony';
    
    export default class EntryAbility extends RNAbility {
      getPagePath() {
        return 'pages/Index';
      }
    }
  2. MyApplicaton\entry\src\main\ets 目录下新增 RNPackagesFactory.ets,把以下代码复制进去即可:

    javascript 复制代码
    import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony/ts';
    export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
      return [];
    }
  3. 打开MyApplicaton\entry\src\main\ets\pages\Index.ets,添加RNOH的使用代码,修改后如下:

    import { AnyJSBundleProvider, ComponentBuilderContext, FileJSBundleProvider, MetroJSBundleProvider, ResourceJSBundleProvider, RNApp, RNOHErrorDialog, RNOHLogger, TraceJSBundleProviderDecorator, RNOHCoreContext } from '@rnoh/react-native-openharmony'; import { createRNPackages } from '../RNPackagesFactory';

    @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) {}

    const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent)

    @Entry @Component struct Index { @StorageLink('RNOHCoreContext') private rnohCoreContext: RNOHCoreContext | undefined = undefined @State shouldShow: boolean = false private logger!: RNOHLogger

    aboutToAppear() { this.logger = this.rnohCoreContext!.logger.clone("Index") const stopTracing = this.logger.clone("aboutToAppear").startTracing();

    csharp 复制代码
    this.shouldShow = true
    stopTracing();

    }

    onBackPress(): boolean | undefined { // NOTE: this is required since Ability's onBackPressed function always // terminates or puts the app in the background, but we want Ark to ignore it completely // when handled by RN this.rnohCoreContext!.dispatchBackPress() return true }

    build() { Column() { if (this.rnohCoreContext && this.shouldShow) { if (this.rnohCoreContext?.isDebugModeEnabled) { RNOHErrorDialog({ ctx: this.rnohCoreContext }) } RNApp({ rnInstanceConfig: { createRNPackages, enableNDKTextMeasuring: true, // 该项必须为true,用于开启NDK文本测算 enableBackgroundExecutor: false, enableCAPIArchitecture: true, // 该项必须为true,用于开启CAPI arkTsComponentNames: [] }, initialProps: { "foo": "bar" } as Record<string, string>, appKey: "AwesomeProject", wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder, onSetUp: (rnInstance) => { rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP") }, jsBundleProvider: new TraceJSBundleProviderDecorator( new AnyJSBundleProvider([ new MetroJSBundleProvider(), // NOTE: to load the bundle from file, place it in // /data/app/el2/100/base/com.rnoh.tester/files/bundle.harmony.js // on your device. The path mismatch is due to app sandboxing on HarmonyOS new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js'), new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'hermes_bundle.hbc'), new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'bundle.harmony.js') ]), this.rnohCoreContext.logger), }) } } .height('100%') .width('100%') } }

8、复制RN生成的业务bundle到项目中

将之前RN那边生成的bundle 文件和 assets 图片放在 entry/src/main/resources/rawfile 路径下,由于上一步我们在代码中设置了从rawfile下面获取,所以就能加载到这个目录。

9、重新编译项目依赖

上面已经把鸿蒙的RN相关依赖都配置好了,接下来进入DevEco Studio,选择File->Sync and Refresh Project选项,编译器会把前面设置的依赖都加载进编译器的内存。

10、构建和运行项目

点击运行按钮即可。接下来就是摘取胜利果实的时候了,也是最容易出现问题的时候。我会将其中可能出现的问题,列举出来分享出来给大家。

问题一 没有配置cmakelist

如果你没有配置cmakelist或者配置不正确,将会报如下错误:

解决方案:详见步骤6,新建cpp文件,将配置代码复制进入即可。

问题二 项目路径太长

如果你的项目路径名字太长,获取文件夹放得太深,导致整个路径超过260个字符,也会编译不过,具体报错信息如下:

解决方案:将项目路径放浅一些,然后路径里每个文件夹名字都改简单一些。

问题三 Ability继承错误

你想使用RN的那个Ability需要继承自RNAbility,如果你忘记改了,继续继承UIAbility的话,那么就会报一下错误:

解决方案:参考步骤7,修改继承的父类即可。

问题四 鸿蒙依赖错误

如果你的cpp环境没有配置好,或者是没有把包复制到前面说过的目录下,就会报这个错误:

解决方案:参考步骤6,配置好cpp相关依赖。

问题五 官方DEMO方法名错误

如果你是直接下载的官方DEMO,运行的时候会报这个方法找不到的错误。

解决方案:这个是官方DEMO自带的问题,把报错的地方instance->callFunction改成instance->callJSFunction即可。

三、本文总结

在本文中,我分享了如何搭建鸿蒙原生这边的环境,可以让RN那边打出来的bundle包跑起来。同时列出来了很多大家都很容易碰到的问题,并且给出了对应解决方案,希望能对大家有所帮助。

接下来,我将分享RN在鸿蒙端的热加载和调试配置,以及分享其中的踩坑点,感兴趣的家人们可以点赞关注一下。文中有表达错误的地方,也欢迎大家批评指正,共同进步。

相关推荐
GISer_Jing3 小时前
React核心功能详解(一)
前端·react.js·前端框架
FØund4045 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
SameX6 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX6 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
疯狂的沙粒6 小时前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
鑫宝Code7 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Random_index13 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
沉默璇年16 小时前
react中useMemo的使用场景
前端·react.js·前端框架
鸿蒙自习室17 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
红绿鲤鱼17 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架