【开源鸿蒙跨平台开发学习笔记】Day02:React Native 开发 HarmonyOS-环境搭建篇(填坑记录)

前言

上一篇《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:

  1. 打开Settings->OpenHarmony SDK,配置SDK存放的路径;
  2. 设置下载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的哪个版本呢?

有以下几点:

  1. 在之前配置环境变量的时候,你配置的PATH的toolchains的路径对应的openHarmony SDK的版本,我配置的是API20也就是6.0.0.47;

  2. 然后去https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/release-notes/react-native-harmony-v6.0.0.508.md

  3. 这里查找对应的版本信息,第一步点击左侧版本列表中的文档文件,第二步查看HarmonyOS SDK的版本是不是你本地配置好的版本,第三步,查看react-native-harmony的版本号;

  4. 确认好版本号后执行依赖添加命令:

    复制代码
    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文件夹的相对位置配置的,你可以根据自己的修改一下;

以上基本就把环境搭建遇到的坑都填上了。接下来我会继续记录后续开发细节。

相关推荐
lqj_本人1 小时前
鸿蒙Qt网络通信:HTTPS握手失败与证书陷阱
qt·https·harmonyos
云栈开源日记3 小时前
Python 开发技术栈梳理:从数据库、爬虫到 Django 与机器学习
数据库·爬虫·python·学习·机器学习·django
青衫码上行3 小时前
【Java Web学习 | 第15篇】jQuery(万字长文警告)
java·开发语言·前端·学习·jquery
lqj_本人8 小时前
HarmonyOS + Cordova 工程搭建与目录结构:从零到跑通 & 常见报错排查
华为·harmonyos
必胜的思想钢印8 小时前
修改主频&睡眠模式&停机模式&待机模式
笔记·stm32·单片机·嵌入式硬件·学习
Georgewu9 小时前
【HarmonyOS 6】在UI控件上滑动也会触发onClick点击事件?
harmonyos
Dream Algorithm10 小时前
价格在走盘整,但是头寸持仓量增加说明什么
笔记
Georgewu10 小时前
【HarmonyOS 6】为什么getContext 废弃,使用getHostContext说明
harmonyos
爱笑的眼睛1110 小时前
HarmonyOS应用崩溃捕获与上报:分布式场景下的深度实践与优化
华为·harmonyos