【开源鸿蒙跨平台开发学习笔记】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文件夹的相对位置配置的,你可以根据自己的修改一下;

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

相关推荐
Sahadev_几秒前
GitMemo 安卓版发布了:现在可以随时随地查看和记录自己的笔记
android·笔记·创业创新
会编程的土豆2 分钟前
消息队列(MQ)入门笔记
java·笔记·spring
水木流年追梦3 分钟前
大模型入门-DPO 直接偏好优化
人工智能·学习·算法·机器学习·正则表达式
网络与设备以及操作系统学习使用者5 分钟前
vi与vim在openEuler中的差异及应用
linux·运维·网络·学习·vim
atomicmaker8 分钟前
进程/线程?并发/并行?
经验分享·笔记·其他
徐安安_ye115 分钟前
FlashAttention学习路线:从调API到写算子,你该走哪条路
python·学习
水云桐程序员16 分钟前
学习 React Native(简称 RN)的路径
学习·react native·react.js
lizhihai_9917 分钟前
股市学习心得-技术指标学习(布林线+MACD)
大数据·人工智能·学习
ai安歌29 分钟前
鸿蒙PC:Qt适配OpenHarmony实战【人名录】:单机联系人卡片,不读系统通讯录也能演示详情联动
数据库·qt·harmonyos
wuxinyan1231 小时前
工业级大模型学习之路024:LangChain零基础入门教程(第七篇):RAG 系统评估、全链路调优
人工智能·python·学习·langchain