鴻蒙版本：HarmonyOS NEXT/API12+
1. 增加環(huán)境變量
打開(kāi)或者創(chuàng)建~/.zshrc文件，在文件的末尾增加下面環(huán)境變量，然后執(zhí)行 source ~/.zshrc
export PATH="/Applications/DevEco-Studio.app/Contents/sdk/default/openharmony/toolchains:HDC_SERVER_PORT
export HDC_SERVER_PORT
export RNOH_C_API_ARCH=1
2. 創(chuàng)建 ReactNative 新項(xiàng)目
npx react-native@0.72.5 init TestHarmonyRN --version 0.72.5 --npm
添加—npm是為了避免下面這個(gè)錯(cuò)誤出現(xiàn)
error Couldn't find the "/var/folders/d3/nhr1qyk17xzgj7wh11yxvyhc0000gn/T/rncli-init-template-DAyOpL/node_modules/react-native/template.config.js file inside "react-native" template. Please make sure the template is valid.
3. 修改ReactNative項(xiàng)目
- 安裝鴻蒙依賴
在TestHarmonyRN目錄下執(zhí)行npm i @react-native-oh/react-native-harmony - 修改metro(metro.config.js)配置
const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
const {
createHarmonyMetroConfig,
} = require('@react-native-oh/react-native-harmony/metro.config');
const config = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true
},
}),
},
};
module.exports = mergeConfig(
getDefaultConfig(__dirname),
createHarmonyMetroConfig({
reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
}),
config
);
4. 創(chuàng)建并修改鴻蒙原生工程
1. 安裝ReactNative依賴在entry目錄下執(zhí)行
ohpm i @rnoh/react-native-openharmony
執(zhí)行完成后，在entry目錄下會(huì)生成oh_modules文件夾
2. 修改原生代碼支持RN
1. 在entry/src/main目錄下面新建cpp文件夾
2. 在cpp目錄下新增CMakeLists.txt文件
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)
3. 在cpp目錄下新增PackageProvider.cpp文件
#include "RNOH/PackageProvider.h"
using namespace rnoh;
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {};
}
4. 修改entry\build-profile.json5里的buildOption
"buildOption": {
"externalNativeOptions": {
"path": "./src/main/cpp/CMakeLists.txt",
"arguments": "",
"cppFlags": "",
}
}
5. 修改entry/src/main/ets/entryability/EntryAbility.ets
import { RNAbility } from '@rnoh/react-native-openharmony';
export default class EntryAbility extends RNAbility {
getPagePath() {
return 'pages/Index';
}
}
6. 在entry/src/main/ets新增RNPackagesFactory.ets
import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [];
}
7. 修改 entry/src/main/ets/pages/Index.ets文件
import {
AnyJSBundleProvider,
ComponentBuilderContext,
FileJSBundleProvider,
MetroJSBundleProvider,
ResourceJSBundleProvider,
RNApp,
RNOHErrorDialog,
RNOHLogger,
TraceJSBundleProviderDecorator,
RNOHCoreContext
} from '@rnoh/react-native-openharmony';
import { createRNPackages } from '../RNPackagesFactory';
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {}
const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent)
@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 {
// NOTE: this is required since `Ability`'s `onBackPressed` function always
// terminates or puts the app in the background, but we want Ark to ignore it completely
// when handled by RN
this.rnohCoreContext!.dispatchBackPress()
return true
}
build() {
Column() {
if (this.rnohCoreContext && this.shouldShow) {
if (this.rnohCoreContext?.isDebugModeEnabled) {
RNOHErrorDialog({ ctx: this.rnohCoreContext })
}
RNApp({
rnInstanceConfig: {
createRNPackages,
enableNDKTextMeasuring: true, // 該項(xiàng)必須為true，用于開(kāi)啟NDK文本測(cè)算
enableBackgroundExecutor: false,
enableCAPIArchitecture: true, // 該項(xiàng)必須為true，用于開(kāi)啟CAPI
arkTsComponentNames: []
},
initialProps: { "foo": "bar" } as Record<string, string>,
appKey: "TestHarmonyRN",
wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder,
onSetUp: (rnInstance) => {
rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP")
},
jsBundleProvider: new TraceJSBundleProviderDecorator(
new AnyJSBundleProvider([
new MetroJSBundleProvider(),
// NOTE: to load the bundle from file, place it in
// `/data/app/el2/100/base/com.rnoh.tester/files/bundle.harmony.js`
// on your device. The path mismatch is due to app sandboxing on OpenHarmony
// new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js'),
// new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'hermes_bundle.hbc'),
// new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'bundle.harmony.js')
]),
this.rnohCoreContext.logger),
})
}
}
.height('100%')
.width('100%')
}
}
8. 配置搖一搖權(quán)限，修改module.json5
"requestPermissions": [
{
"name": "ohos.permission.ACCELEROMETER"
}
],
5.調(diào)試并運(yùn)行
1. 啟動(dòng)ReactNative項(xiàng)目
在ReactNative項(xiàng)目目錄下執(zhí)行npm run start
2. 啟動(dòng)鴻蒙項(xiàng)目，并搖一搖，輸入自己本地的ip地址+8081的，模擬器搖一搖如圖
截屏2025-03-22 14.08.24.png
