react-native-smartassets

Open the harmony directory of the HarmonyOS project in DevEco Studio.

2.1. Overrides RN SDK

To ensure the project relies on the same version of the RN SDK, you need to add an overrides field in the project's root oh-package.json5 file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory.

For more information about the purpose of this field, please refer to the official documentation.

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2.2. Introducing Native Code

Currently, two methods are available:

• Use the HAR file.
• Directly link to the source code.

Method 1 (recommended): Use the HAR file.

Open entry/oh-package.json5 file and add the following dependencies:

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-smartassets": "file:../../node_modules/@react-native-ohos/react-native-smartassets/harmony/smartassets.har"
  }

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

cd entry
ohpm install

Method 2: Directly link to the source code.

2.3. Configuring CMakeLists and Introducing SmartAssetsPackage

Open entry/src/main/cpp/CMakeLists.txt and add the following code:

+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")

# RNOH_BEGIN: manual_package_linking_1
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-smartassets/src/main/cpp" ./smartassets)
# RNOH_END: manual_package_linking_1

# RNOH_BEGIN: manual_package_linking_2
+ target_link_libraries(rnoh_app PUBLIC smartassets)
# RNOH_END: manual_package_linking_2

Open entry/src/main/cpp/PackageProvider.cpp and add the following code:

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
+ #include "SmartAssetsPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
        std::make_shared<RNOHGeneratedPackage>(ctx),
+       std::make_shared<SmartAssetsPackage>(ctx)
    };
}

2.4. Introducing SmartAssetsPackage to ArkTS

Open the entry/src/main/ets/RNPackagesFactory.ets file and add the following code:

  ...
+ import { SmartAssetsPackage } from '@react-native-ohos/react-native-smartassets';

export function createRNOHPackages(ctx: RNPackageContext): RNOHPackage[] {
  return [
+   new SmartAssetsPackage(ctx)
  ];
}