【HarmonyOS】HarmonyOS和React Native混合开发 (一)之环境安装

【HarmonyOS】HarmonyOS和React Native混合开发 (一)之环境安装

一、React Native是什么?

React Native 是一个基于 JavaScript 和 React 框架的开源框架,可以用到开发移动应用跨端解决方案。实现一套代码,在Android和IOS上都可运行。

React Native 也是声明式的组件开发,与ArkTS类似。并且React Native 跨端方案与Flutter也类似。都是通过渲染引擎将UI配置信息,绘制成目标平台的原生UI。

与flutter不同的是,RN偏向于前端开发语言去实现跨平台应用的效果。而前者的开发思路偏重。

详情可参见:Recat Native 如何使用 (一)

React Native 中文网

二、React Native for OpenHarmony 鸿蒙化RN有什么特别之处?

相较于React Native在Android和IOS上,将js和react组件代码转化成对应的原生UI控件,实现原生UI的思路。在鸿蒙上的转化路径更短。

直接将js和react组件代码转化成了ArkUI的后台Cpp信息,并非转化为ArkUI控件,这样的思路提升了很高的渲染效率。

三、环境安装

HarmonyOS和React Native混合开发首先需要安装各自的开发环境。(与Flutter环境安装对比起来,RN开发环境安装极其简单)

1.HarmonyOS开发环境安装和配置

详情可以参照之前的博客安装步骤: 鸿蒙应用开发环境安装和配置

2.配置开发环境变量

以window举例,计算机属性-高级系统设置-环境变量:

dart 复制代码
#hdc环境配置
export PATH=$TOOL_HOME/sdk/default/openharmony/toolchains:$PATH # hdc指令

#hdc端口,变量值可设置为任意未被占用的端口,如 7035
export HDC_SERVER_PORT=7035

#配置 CAPI 版本环境变量,变量值为 1
export RNOH_C_API_ARCH=1


完成以上环境配置即可进行鸿蒙的 React Native 项目开发

相关推荐
AlbertZein15 小时前
HarmonyOS一杯冰美式的时间 -- @Env
harmonyos
小雨青年21 小时前
鸿蒙 HarmonyOS 6 | ArkUI (05):布局进阶 RelativeContainer 相对布局与 Flex 弹性布局
华为·harmonyos
特立独行的猫a1 天前
鸿蒙PC三方库编译libiconv链接报错,解决 libtool 链接参数丢失问题过程总结
harmonyos·交叉编译·libiconv·三方库·鸿蒙pc·libtool
哈__1 天前
Flutter 开发鸿蒙 PC 第一个应用:窗口创建 + 大屏布局
flutter·华为·harmonyos
特立独行的猫a1 天前
鸿蒙PC命令行及三方库libiconv移植:鸿蒙PC生态的字符编码基石
harmonyos·交叉编译·libiconv·三方库移植·鸿蒙pc
kirk_wang1 天前
Flutter Widget核心概念深度解析
flutter·移动开发·跨平台·arkts·鸿蒙
不爱学英文的码字机器1 天前
【鸿蒙PC命令行适配】基于OHOS SDK直接构建xz命令集(xz、xzgrep、xzdiff),完善tar.xz解压能力
华为·harmonyos
特立独行的猫a1 天前
[鸿蒙PC命令行程序移植实战]:交叉编译移植最新openSSL 4.0.0到鸿蒙PC
华为·harmonyos·移植·openssl·交叉编译·鸿蒙pc
特立独行的猫a1 天前
[鸿蒙PC命令行适配] 移植Aria2文件下载神器最新版到鸿蒙PC的完整教程 (附可运行程序)
harmonyos·移植·交叉编译·aria2·鸿蒙pc
chao_6666661 天前
React Native + Expo 开发指南:编译、调试、构建全解析
javascript·react native·react.js