Integration Guide for React Native for OpenHarmony (ohos_react_native)

Integration

1.Preset Bonree SDK Environment

Copy bonree_sdk-signed.har and bonree_sdk_rn.har to the hars folder in the project-level directory.

2.Add bonree_sdk-signed.har and bonree_sdk_rn.har

2.1 Append @bonree/agent and @bonree/agent_rn dependencies to the dependencies{} block in the oh-package.json5 file of the project's main module.

  "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 Add overrides to the oh-package.json5 file in the project root directory to unify the versions of @rnoh/react-native-openharmony, @bonree/agent, and @bonree/agent_rn used by all third-party libraries to avoid compilation errors.

  "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"
  }

3.Add bonree_sdk_rn to the Build

3.1 Modify CMakeLists.txt

Add the following configurations starting with "+" to the CMakeLists file: add_subdirectory("${OH_MODULE_DIR}/@bonree/agent_rn/src/main/cpp" ./broh_rn_plugin) and 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 Modify PackageProvider.cpp

Create the package object on the C++ side in entry/src/main/cpp/PackageProvider.cpp. Add the following configurations starting with "+": #include "BonreeRNPluginPackage.h" and 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 Add Bonree RN Plugin Implementation Files to RNApp Configuration

// If entry/src/main/ets/RNPackagesFactory.ets does not exist, create it. If it exists, append new BonreeGeneratedPackage(ctx) to the returned array.
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 Import Package during RNApp Initialization

Add the following configurations starting with "+": import { createRNPackages } from '../RNPackagesFactory'; and createRNPackages.

//  index page
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%')
  }
}

4.Sync & Rebuild Project

Click [ Sync Now ] in the top right corner.

Access

1.Network Collection

Using RNAbility

If inheriting from RNAbility, directly override this method to return the BonreeHttpClient provided by the Bonree agent. If you need to customize the HTTPClient, refer to Harmony Agent Network Data Collection for specific network data collection methods.

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

Without RNAbility

When calling RNInstancesCoordinator.create(dependencies: RNInstancesCoordinatorDependencies, options?: RNInstancesCoordinatorOptions): RNInstancesCoordinator, specify the BonreeHttpClient provided by the Bonree agent in the options. If you need to customize the HTTPClient, refer to Harmony Agent Network Data Collection for specific network data collection methods

二、Native Application Access

The Native Application Access Process must also be completed.