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

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

相关推荐
花开彼岸天~8 小时前
03 module.json5 配置文件全解:能力声明、权限申请与设备支持
华为·harmonyos·鸿蒙系统
ZZZMMM.zip9 小时前
基于鸿蒙HarmonyOS NEXT开发AI股票分析应用:智能投资新体验与鸿蒙Flutter框架跨端实践
人工智能·flutter·华为·harmonyos·鸿蒙
花开彼岸天~11 小时前
04 oh-package.json5 与依赖管理:ohpm 包管理器全解析
华为·harmonyos·鸿蒙系统
爸爸61912 小时前
06 项目目录结构与编码规范:三层架构与 DAO 模式实践
华为·架构·harmonyos·鸿蒙系统
星幻元宇VR12 小时前
公共安全实训展厅设备【人防知识学习系统】
科技·学习·安全
牛仔只喝牛奶13 小时前
多端跨端技术选型:小程序 + H5 + App 的两栈拆分落地
react native·react.js
不才难以繁此生13 小时前
HarmonyOS 端侧应用实战:中式美食如何把资源、路由、存储和视频拆菜串成一条工程链路
harmonyos·arkts·arkui·中式美食·端侧应用
爸爸61913 小时前
07 ArkTS 基础类型与接口定义:从 TypeScript 到鸿蒙的类型升级
javascript·华为·typescript·harmonyos·鸿蒙系统
绝世番茄14 小时前
鸿蒙 HarmonyOS ArkTS 音乐播放器界面布局深度学习指南
深度学习·华为·list·harmonyos·鸿蒙
不才难以繁此生15 小时前
HarmonyOS 实战|中式美食视频拆菜编辑面板:因子状态、草稿卡片与底部操作条
harmonyos·arkts·中式美食·arkui v2·视频拆菜