前言
上一篇《React Native 开发 HarmonyOS-环境搭建篇》中我有说到一些注意的点和容易报错的地方,但是还有有一些不太详细,这篇我再详细的说一下我遇到的一些坑和作为初学者有哪些容易混淆的地方当做自己记录和复盘也分享给大家防止大家在我掉坑的地方继续踩坑,O(∩_∩)O哈哈~
一、DevEco Studio和OpenHarmony SDK
安装 DevEco Studio可以到官方下载页面:https://developer.huawei.com/consumer/cn/download/deveco-studio

根据自己的需求下载不同平台的版本,我下载的是Mac的版本,大家尽量下载Release版本因为Beta版本不仅可能会出现奇怪的问题还无法在应用市场上线APP所以不推荐大家下载~~~
安装DevEco Studio之后我们配置OpenHarmony的SDK:
- 打开Settings->OpenHarmony SDK,配置SDK存放的路径;

- 设置下载SDK的版本,这里有个地方要注意:就是你下载的SDK对应的Toolchains的版本号;

好了安装好DevEco Studio之后就有另一个需要注意的地方了~~~
二、创建React Native工程和集成
根据上一篇安装好基础环境后要使用:
npx react-native@0.72.5 init HarmonyRNTest --version 0.72.5
这个命令出创建ReactNative的基础工程模版,注意目前使用的是ReactNative的0.72.5版本,一定要指定这个版本,其他版本不支持,会报错的~~~
然后就等待模版工程创建完毕。
开始集成react-native-harmony到ReactNative工程中,这块有个大坑。官方文档中一直强调要用react-native-harmony@0.72.71这个版本,但是并没有这个版本,而且这个版本也是不对的~~~,坑了我很久,哎~~~
这块怎么确认你要下载react-native-harmony的哪个版本呢?
有以下几点:
-
在之前配置环境变量的时候,你配置的PATH的toolchains的路径对应的openHarmony SDK的版本,我配置的是API20也就是6.0.0.47;
-
这里查找对应的版本信息,第一步点击左侧版本列表中的文档文件,第二步查看HarmonyOS SDK的版本是不是你本地配置好的版本,第三步,查看react-native-harmony的版本号;

-
确认好版本号后执行依赖添加命令:
pnpm i @react-native-oh/react-native-harmony@0.72.90我用的是pnpm,npm命令同理,使用npm最好要版本8+以上的,要不可能会有兼容性问题;
三、HarmonyOS工程集成和CMakeLists配置问题
最后一坑就是在HarmonyOS工程中集成react-native-openharmony的时候一定要和之前在ReactNative工程中集成的版本一样!!!
ohpm i @rnoh/react-native-openharmony@0.72.90
然后在MacOS下还有个坑,不知道Windows有没有,我理解应该没有,这个坑就是因为@rnoh/react-native-openharmony这个库比较大,有600多兆,所以系统安装这个依赖的时候会放到.ohpm这个目录下在oh_modules文件夹下的@rnoh/react-native-openharmony这个其实是一个"替身"也就是链接link或者说有点像Windows的快捷方式,所以按照官方的CMakeLists文件配置就不行了,一直找不到文件。这个也是比较坑的问题,我查找了很久。解决方案也很简单。就是用绝对路径配置:
官方配置:
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)
我的配置:
project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
get_filename_component(PROJECT_ROOT "${CMAKE_CURRENT_SOURCE_DIR}/../../../../" ABSOLUTE)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(OH_MODULE_DIR "${PROJECT_ROOT}/oh_modules/.ohpm/@rnoh+react-native-openharmony@0.72.90/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)
这行代码:get_filename_component(PROJECT_ROOT "${CMAKE_CURRENT_SOURCE_DIR}/../../../../"是根据我cpp文件夹和oh_modules文件夹的相对位置配置的,你可以根据自己的修改一下;
以上基本就把环境搭建遇到的坑都填上了。接下来我会继续记录后续开发细节。