id="3.1%E9%85%8D%E7%BD%AE%20CAPI%20%E7%89%88%E6%9C%AC%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F"

name="3.1%E9%85%8D%E7%BD%AE%20CAPI%20%E7%89%88%E6%9C%AC%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F">3.1配置

CAPI

在 “系统变量” 区域，点击 “新建” 按钮

alt=""

src="https://i-blog.csdnimg.cn/direct/fc57e72b7dbe43588d1e00c7d4bf6e86.png"

width="855">

4.1验证环境配置

配置完成后，需要先检查一下是否配置成功，所以就需要打开cmd，输入如下

src="https://i-blog.csdnimg.cn/direct/2394686dca144e468a7bf543282a4cfe.png"

width="470">

显示出版本号，说明环境配置成功

id="%C2%A04.1React%20Native%20%E9%B8%BF%E8%92%99%E5%8C%96%E7%89%88%E6%9C%AC%E4%BF%A1%E6%81%AF"

name="%C2%A04.1React%20Native%20%E9%B8%BF%E8%92%99%E5%8C%96%E7%89%88%E6%9C%AC%E4%BF%A1%E6%81%AF"> 4.1React

Native

src="https://i-blog.csdnimg.cn/direct/4201c5bcfffd487b90dca88420a9f188.png"

width="1219">

id="%E4%B8%89%E3%80%81%E5%BC%80%E5%A7%8B%E5%88%9B%E5%BB%BAReact%20Native%20%E5%B7%A5%E7%A8%8B"

name="%E4%B8%89%E3%80%81%E5%BC%80%E5%A7%8B%E5%88%9B%E5%BB%BAReact%20Native%20%E5%B7%A5%E7%A8%8B">三、开始创建React

Native

工程

1. 可以创建一个文件夹，存放自己所有的项目文件，建议不要建在C盘，其他盘都可以
2. cmd定位到当前目录，

   style="color:

   1)">注意：文件中不能有中文的字符，不然会创建失败

3. alt=""

   src="https://i-blog.csdnimg.cn/direct/8207438a63924c90b58c0e83cae29824.png"

   alt=""

   src="https://i-blog.csdnimg.cn/direct/aa4fdeb0cfa44b488f041ec5e340ac6b.png"

   width="1238">

使用如下命令创建项目，

项目名：AtomGitNews

1. ⚠️ 重要提示：必须使用 0.72.5 版本，这是目前

   React

   src="https://i-blog.csdnimg.cn/direct/f3adde0aa12d49649f6d9cc3d217ec0d.png"

   width="1034">

恭喜！

React

Native

工程创建成功！

可以先启动一下项目，看看有没有安装成功，npm

start

如下图所示表示项目已启动

alt=""

src="https://i-blog.csdnimg.cn/direct/2fe92517a26d495cbb6a5b8b87b6f6c4.png"

width="1304">

id="%E5%9B%9B%E3%80%81%E5%88%9B%E5%BB%BA%E9%B8%BF%E8%92%99%E5%B7%A5%E7%A8%8B"

name="%E5%9B%9B%E3%80%81%E5%88%9B%E5%BB%BA%E9%B8%BF%E8%92%99%E5%B7%A5%E7%A8%8B">四、创建鸿蒙工程

React

Native

Studio，启动这个软件，点击 “Create

Project” 按钮，打开工程创建向导

alt=""

src="https://i-blog.csdnimg.cn/direct/bc6798fa5d9d4c359ee1d727e21a8be9.png"

alt=""

src="https://i-blog.csdnimg.cn/direct/c2965406018f4f518bbd5d1cd730b17e.png"

width="1245">

配置工程信息

填写工程配置信息：

工程名称：可以保持默认或自定义

工程包名：保持默认即可（例如：com.example.myapplication）

工程存储位置：重要

Native工程根下的 metro.config.js 文件，增加

OpenHarmony

require('@react-native/metro-config');

const

require("@react-native-oh/react-native-harmony/metro.config");

/***

https://facebook.github.io/metro/docs/configuration**

@type

{import('metro-config').MetroConfig}*/

const

mergeConfig(getDefaultConfig(__dirname),

createHarmonyMetroConfig({reactNativeHarmonyPackageName:

'@react-native-oh/react-native-harmony'

}),

id="4.%E7%94%9F%E6%88%90%20bundle%20%E6%96%87%E4%BB%B6"

name="4.%E7%94%9F%E6%88%90%20bundle%20%E6%96%87%E4%BB%B6">4.生成

bundle

class="language-javascript">npm

run

src="https://i-blog.csdnimg.cn/direct/ef51d0aba16641868a14822e2fd07195.png"

alt=""

src="https://i-blog.csdnimg.cn/direct/f6a51eef416146cdb225a066a37a4250.png"

width="1920">

React

配置是否正确

id="5.%E5%9C%A8%E5%8E%9F%E7%94%9F%E5%B7%A5%E7%A8%8B%E9%B8%BF%E8%92%99%E4%BE%A7%E9%85%8D%E7%BD%AE%20React%20Native%20for%20OpenHarmony"

name="5.%E5%9C%A8%E5%8E%9F%E7%94%9F%E5%B7%A5%E7%A8%8B%E9%B8%BF%E8%92%99%E4%BE%A7%E9%85%8D%E7%BD%AE%20React%20Native%20for%20OpenHarmony">5.在原生工程鸿蒙侧配置

React

OpenHarmony

现在打开鸿蒙软件需要在鸿蒙原生工程中集成React

Native