欢迎光临
我们一直在努力

React Native for OpenHarmony 实战:[开发环境搭建与项目编译指南]

React Native for OpenHarmony 实战:[开发环境搭建与项目编译指南]

一、基础环境搭建

配置环境之前把基础文件夹创建好 在这里插入图片描述

1.1 Git 下载与安装

  • 下载地址: Git – Install
  • 参考教程: 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述在这里插入图片描述 在这里插入图片描述

在这里插入图片描述 win+r打开终端输入cmd进行验证 在这里插入图片描述 依次输入

git

git -v

在这里插入图片描述 在这里插入图片描述

1.2 Java JDK17 下载与安装

  • 下载地址: Java Downloads | Oracle
  • 参考教程: 在这里插入图片描述 这里直接解压文件 在这里插入图片描述 打开解压文件把里面的东西放到jdk文件里其他的不要 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 输入JAVA_HOME变量值为下载jdk的文件位置 在这里插入图片描述 输入%JAVA_HOME%\\bin 在这里插入图片描述 打开终端依次输入

java

javac

java -version

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

二、Flutter SDK 下载安装和开发环境搭建

2.1 DevEco Studio 下载安装

安装链接: DevEco Studio下载链接

以下为图文步骤 在这里插入图片描述

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 打开DevAPP 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

SDK环境变量配置

打开Dev安装位置复制路径 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 把下面的四个路径复制上去然后把红框里的换成刚才复制的路径就行了(就是Dev安装的位置) 在这里插入图片描述

F:\\Chengxusheji\\HarmonyOS\\DevEco Studio\\sdk\\default\\openharmony\\toolchains
F:\\Chengxusheji\\HarmonyOS\\DevEco Studio\\tools\\ohpm\\bin
F:\\Chengxusheji\\HarmonyOS\\DevEco Studio\\tools\\node
F:\\Chengxusheji\\HarmonyOS\\DevEco Studio\\tools\\hvigor\\bin

另外,还需要新建DEVECO_SDK_HOME变量,路径还是Dev安装位置,但是路径后面要加上\\bin 在这里插入图片描述

操作步骤:

  • 右键“此电脑” -> “属性” -> “高级系统设置” -> “环境变量”。
  • 在“系统变量”中找到 Path,点击“编辑”,然后“新建”,依次添加上述四个路径。
  • 2.4 下载适配鸿蒙的 Flutter SDK

  • 下载 SDK: 在创建好的flutter文件夹里
    • 打开 终端,执行以下命令克隆 SDK 仓库
    • 在这里插入图片描述 然后输入下面的代码git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git
  • 在这里插入图片描述 完成之后打开里面的bin文件夹配置环境变量 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

    检查 Flutter 版本: * 打开新的终端窗口,执行: bash flutter –version 在这里插入图片描述

    . 诊断 Flutter 环境: * 执行以下命令检查环境是否配置正确: bash flutter doctor -v 在这里插入图片描述

    三、创建并编译项目

    3.1 创建项目

    在您希望存放项目的目录下,打开终端并执行以下命令(将 <projectName> 替换为您的项目名):

    flutter create –platforms ohos <projectName>

    在这里插入图片描述 在这里插入图片描述

    3.2 构建 App

    进入创建的目录,使用 PowerShell 执行以下命令构建 Release 版本的 App: 在这里插入图片描述 输入指令

    flutter build app release

    在这里插入图片描述

    3.3 打开项目

  • 使用 DevEco Studio 打开项目目录。
  • 在这里插入图片描述
  • 在这里插入图片描述 在这里插入图片描述

    4.虚拟机创建 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

    在这里插入图片描述 下载完成点击下一步进行镜像下载 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

    通过以上步骤,您已成功搭建起一套完整的 Flutter + OpenHarmony 开发环境,并能够创建、编译、调试乃至运行适配鸿蒙系统的 Flutter 应用。尽管过程中可能涉及较多的手动配置和依赖管理,但随着 OpenHarmony 生态的持续完善与社区插件的不断丰富,Flutter 在鸿蒙平台上的开发体验正日益成熟。 欢迎加入开源鸿蒙跨平台社区:开源鸿蒙跨平台开发者社区

    赞(0)
    未经允许不得转载:171主机测评 » React Native for OpenHarmony 实战:[开发环境搭建与项目编译指南]
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址