首页 > 其他分享 >如何在原生鸿蒙APP中使用RN的bundle包

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

时间:2024-11-09 17:47:07浏览次数:1  
标签:鸿蒙 APP bundle cpp rnoh RN DIR

一、创作背景

上一篇博客中,我给大家分享了如何创建一个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
    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,将以下代码直接复制进去即可
    #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,将以下代码直接复制进去即可:
    {
     "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。
    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,把以下代码复制进去即可:
    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();

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

 

标签:鸿蒙,APP,bundle,cpp,rnoh,RN,DIR
From: https://www.cnblogs.com/foodie/p/18537033

相关文章

  • [COCI2022-2023#5] Slastičarnica 题解
    前言题目链接:洛谷。题意简述一个长为\(n\)的序列\(\{a_n\}\)和\(q\)次操作,第\(i\)次操作中,你可以删除序列长为\(d_i\)的前缀或后缀,并需要保证删除的所有数\(\geqs_i\)。每次操作前,你可以选择任意长度的前缀或后缀,并将其删除,也可以不操作。请问,在你不能进行下一次操......
  • lua插件之----【luaApp 应用类】
    API列表(自写API,供自查询。对您无用,不要看了) 接口原型说明luaApp.find根据APP特征字符查找APP包名,比如:anjian。关键词不区分大小写luaApp.lists获取所有已安装的APP的包名luaApp.getRuningLists获取所有正在运行的APPluaApp.exists指定APP是否安装luaApp......
  • python+flask计算机毕业设计好骑行打卡园app系统(程序+开题+论文)
    文件加密系统的设计与实现tp835本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容好骑行打卡园app系统毕业设计相关内容说明一、选题背景随着骑行运动在全球范围内的日益流行,与之相关的数字化服务......
  • An indoor service area determination approach for pedestrian navigation path pla
    目的:人们在导航时往往需要设定具体的起点和终点,但有时他们可能只想找到某个类型的地方,比如最近的商店或厕所。需求?最短距离、最快速路径、最简单或最少转弯的路径、最少或最多空间访问、最少障碍物的路径、一般安全路径、避开动态障碍物的安全路径、健康最优路径(例如特定程度的卡......
  • 浅谈 PHP 与手机 APP 开发(API 接口开发)
    一、先简单回答两个问题:1、PHP可以开发客户端?答:不可以,因为PHP是脚本语言,是负责完成B/S架构或C/S架构的S部分,即:服务端的开发。(别去纠结GTK、WinBinder)2、为什么选择PHP作为开发服务端的首选?答:跨平台(可以运行在UNIX、LINUX、WINDOWS、MacOS下)、低消耗(PHP消耗相当少的系统......
  • 【模块一】kubernetes容器编排进阶实战之containerd安装及nerdctl客户端⼯具
    安装containerdapt/yum安装#验证仓库版本[root@k8s-node3~]#apt-cachemadisoncontainerdcontainerd|1.7.12-0ubuntu2~22.04.1|https://mirrors.aliyun.com/ubuntujammy-updates/mainamd64Packagescontainerd|1.6.12-0ubuntu1~22.04.3|https://mirrors.aliyu......
  • 【人脸伪造检测】Spatial-Phase Shallow Learning: Rethinking Face Forgery Detectio
    一、研究动机[!note]创新点:利用相位谱实现伪造检测,并且证明了卷积模型可以提取隐性特征。由于上采样是伪造模型的关键步骤,这篇论文通过相位信息检测上采样的伪影。对比之前的频率模型:F3-Net:通过离散余弦变换后的统计特征实现伪造检测二、检测模型可学习的知识点......
  • 第二届教育发展与社会科学国际学术会议 (EDSS 2025) The 2nd International Conferen
    @目录一、会议详情二、重要信息三、大会介绍四、出席嘉宾五、征稿主题一、会议详情二、重要信息大会官网:https://ais.cn/u/vEbMBz三、大会介绍第二届教育发展与社会科学国际学术会议(EDSS2025)定于2025年1月17-19日在中国上海举行。会议旨在为从事“教育”与“社会科学......
  • 《基础设施、政策与发展杂志》-外文期刊征稿 Journal of Infrastructure, Policy and
    @目录一、会议详情二、重要信息三、大会介绍四、出席嘉宾五、征稿主题一、会议详情二、重要信息大会官网:https://ais.cn/u/vEbMBz三、大会介绍《基础设施、政策与发展杂志》(JIPD)是一本多学科、双盲同行评审期刊,致力于发表有关基础设施、经济发展和公共政策的高质量文章。......
  • 第二届城市建设与交通运输国际学术会议(UCT 2025) 2025 2nd International Conference
    @目录一、会议详情二、重要信息三、大会介绍四、出席嘉宾五、征稿主题一、会议详情二、重要信息大会官网:https://ais.cn/u/vEbMBz三、大会介绍据统计,我国常住人口城镇化率超过65%,部分城市城镇化率超过90%,未来预计还会不断提升。城市建设行业的发展仍处于蓬勃发展的时期。......