ITPub博客

首页 > 移动开发 > ANDROID > 如何在原生鸿蒙APP中使用RN的bundle包

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

ANDROID 作者:只要快乐 时间:2024-11-09 18:17:49 0 删除 编辑

一、创作背景

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


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


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

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


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

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

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

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



3、关联鸿蒙tgz文件

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

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



4、关联openharmony包

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

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



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


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


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




5、安装鸿蒙所需的依赖

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


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

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



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


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


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


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

6、补充C++侧代码

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

在 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)


#include "RNOH/PackageProvider.h" using namespace rnoh; std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {    return {}; }

{ "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",   } ] }

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/70015403/viewspace-3107369/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2022-03-18

  • 博文量
    14
  • 访问量
    2744