React Native for OpenHarmony (ohos_react_native) 集成指南

集成

一、预置Bonree SDK环境

拷贝 bonree_sdk-signed.har，bonree_sdk_rn.har 到工程级目录中的hars文件夹

二、添加bonree_sdk-signed.har，bonree_sdk_rn.har

2.1 在项目主module中的 oh-package.json5 文件的 dependencies{} 中追加 @bonree/agent 和 @bonree/agent_rn 依赖项

  "dependencies": {
    "@rnoh/react-native-openharmony": "0.72.38",
    "@bonree/agent": "file:../hars/bonree_sdk-signed.har",
    "@bonree/agent_rn": "file:../hars/bonree_sdk_rn.har"
  }

2.2 在项目根目录的 oh-package.json5 文件中添加 overrides 统一所有三方库使用的 @rnoh/react-native-openharmony，@bonree/agent 和 @bonree/agent_rn 版本，避免编译错误

  "overrides": {
    "@rnoh/react-native-openharmony": "0.72.38",
    "@bonree/agent": "file:./hars/bonree_sdk-signed.har",
    "@bonree/agent_rn": "file:./hars/bonree_sdk_rn.har"
  }

三、将bonree_sdk_rn 添加到编译中

3.1 修改CMakeLists.txt

CMakeLists文件中添加如下以 "+" 开头的配置，即add_subdirectory("${OH_MODULE_DIR}/@bonree/agent_rn/src/main/cpp" ./broh_rn_plugin) 和 target_link_libraries(rnoh_app PUBLIC broh_rn_plugin) 两行。

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

# RNOH_BEGIN: add_package_subdirectories
+ add_subdirectory("${OH_MODULE_DIR}/@bonree/agent_rn/src/main/cpp" ./broh_rn_plugin)
# RNOH_END: add_package_subdirectories

add_library(rnoh_app SHARED
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)

target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: link_packages
+ target_link_libraries(rnoh_app PUBLIC broh_rn_plugin)
# RNOH_END: link_packages

3.2 修改PackageProvider.cpp

在 entry/src/main/cpp/PackageProvider.cpp 中创建 cpp 侧的 package 对象，在该文件中添加如下以 "+" 开头的配置，即 #include "BonreeRNPluginPackage.h" 和 std::make_shared<BonreeRNPluginPackage>(ctx) 两行。

#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "BonreeRNPluginPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<SamplePackage>(ctx)，
+         std::make_shared<BonreeRNPluginPackage>(ctx)
    };
}

3.3 将 Bonree RN 插件的实现文件添加到 RNApp 的配置中

//entry/src/main/ets/RNPackagesFactory.ets 文件若不存在直接创建，若存在把 new BonreeGeneratedPackage(ctx) 追加在函数返回的数组中。
import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony/ts';
import { BonreeGeneratedPackage } from '@bonree/agent_rn';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [new BonreeGeneratedPackage(ctx)];
}

3.4 在RNApp初始化时引入 Package 添加如下以 "+" 开头的配置

import { createRNPackages } from '../RNPackagesFactory'; 和 createRNPackages 两行

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

@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 {
    this.rnohCoreContext!.dispatchBackPress();
    return true;
  }

  build() {
    Column() {
      if (this.rnohCoreContext && this.shouldShow) {
        if (this.rnohCoreContext?.isDebugModeEnabled) {
          RNOHErrorDialog({ ctx: this.rnohCoreContext })
        }
        RNApp({
          onSetUp: (rnInstance) => {
            rnInstance.bindComponentNameToDescriptorType(RNGestureHandlerRootView.NAME, 'RootView')
            rnInstance.getTurboModule<RNGestureHandlerModule>(RNGestureHandlerModule.NAME).install()
          },
          rnInstanceConfig: {
+          createRNPackages,
            enableNDKTextMeasuring: true,
            enableBackgroundExecutor: false,
            enableCAPIArchitecture: true,
            arkTsComponentNames: [RNC_VIDEO_TYPE]
          },
          appKey: 'RNHomeFluency',
          wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder,
          jsBundleProvider: new TraceJSBundleProviderDecorator(
            new AnyJSBundleProvider([
              new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js')
            ]),
            this.rnohCoreContext.logger),
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

四、Sync & Rebuid 项目

点击右上角的 [ Sync Now ]

接入

一、网络采集

使用RNAbility

在继承RNAbility的情况下直接复写该方法返回博睿探针提供的BonreeHttpClient即可。若用户需要自定义HTTPClient，具体网络数据采集方式参考鸿蒙探针网络数据采集。

protected onCreateDefaultHttpClient(): HttpClient | undefined {
    return new BonreeHttpClient();
}

不使用RNAbility

在调用 RNInstancesCoordinator.create(dependencies: RNInstancesCoordinatorDependencies,options?: RNInstancesCoordinatorOptions): RNInstancesCoordinator 时，在options中指定博睿探针提供的HTTPClient。若用户需要自定义HTTPClient，具体网络数据采集方式参考鸿蒙探针网络数据采集。

二、原生应用接入

需同时进行原生应用接入流程。