Description

This is a demo project for creating custom Fabric components (including CAPI and ArkTS components).

Directory Structure

FabricComponentSample
├── ReactProject Front-end project
├── fabric-component-sample-package RN third-party component (custom Fabric component)
├── NativeProject OpenHarmony project
├── react-native-harmony RN OpenHarmony bundle
├── react-native-harmony-cli RN OpenHarmony scaffolding
└── README.md

Environment Setup

1. Run pnpm pack in fabric-component-sample-package to generate a .tgz file.
2. Run npm i in ReactProject to install the dependency, then execute pnpm dev to generate the bundle.harmony.js;
3. Open NativeProject in DevEco Studio and wait for the automatic project synchronization to complete (for manual synchronization, execute Sync and Refresh Project);
4. Go back to DevEco Studio and click File > Project Structure > Signing Configs, log in and complete the signing.
5. Click run in the upper right corner to start the project.

NOTE: The project uses the latest RNOH dependencies by default during installation. If you need to install a specific version, please refer to RNOH Version Evolution Planning and Branch Strategy to get the version number.

npm dependency installation: npm i @react-native-oh/react-native-harmony@0.84.xx npm i --save-dev @react-native-oh/react-native-harmony-cli@0.84.xx

ohpm dependency installation: ohpm i @rnoh/react-native-openharmony@0.84.xx