Day1：React Native for OpenHarmony 实战：新手视角完成环境就绪 + Todo 真机运行验证

是刚开始接触 OpenHarmony、DevEco Studio 和 React 的初学者。Day1 给自己定的目标是：按“Windows 11 + DevEco Studio + OpenHarmony SDK + React Native for OpenHarmony（RNOH）”这条常见流程，把链路完整跑通一次：创建工程 → 集成 RN → 真机运行 → 用 Todo 示例验证交互。

1. 为什么从 React Native for OpenHarmony 开始

一开始的困惑其实很简单：OpenHarmony 生态不熟，DevEco Studio 也不熟，如果还要一上来就写大量 ArkTS/原生代码，学习曲线会非常陡。

所以选择从 React Native for OpenHarmony 入门，原因是：

• 能用熟悉一点的 JS/TS 思路做页面和逻辑，先把“能做出东西”这件事建立信心。
• 跨平台复用价值明确：同一套组件和业务逻辑，在不同端复用的空间更大。
• 需要原生能力时再补：先跑通，再逐步学习如何桥接 OpenHarmony 的原生能力。

Day1 用一个最小可行 Demo（Todo）来验证：RN 页面能加载，事件能响应，状态能更新。

---

2. 在开始前做的“自查清单”

1. 能打开 DevEco Studio，并且它不报错。
2. 在 DevEco Studio 里能找到并配置 OpenHarmony SDK，至少能创建一个空工程。
3. Node 环境可用：
   • node -v
   • npm -v
4. 构建相关工具链能跑（hvigor、ohpm 通常随 DevEco/OpenHarmony SDK 配套）。
5. 有一台 鸿蒙真机或模拟器，DevEco 能识别到，并且能安装运行应用。

给自己的验收标准是：先把一个空的 OpenHarmony 工程跑到设备上。这一关过了，后面的坑会少一半。

---

3. 怎么理解工程结构：OpenHarmony 壳 + RN 业务

对这种新手来说，把工程拆成两块更容易理解：

• OpenHarmony 工程：更像“外壳”，负责 Ability/ArkTS、资源、签名、打包、安装。
• React Native 工程：更像“业务包”，写页面组件、状态逻辑、交互。
• RNOH：把两者连起来，让 OpenHarmony 应用加载 RN 页面。

---

4. 实际走的流程

4.1 先在 DevEco Studio 创建 OpenHarmony 工程

1. File → New → Create Project 选择一个基础模板（用的是常见的 Stage 模型）。
2. 配置包名、工程名，创建完成。
3. 先不接 RN，直接 Run 一次，确认壳工程可以在设备上启动。

4.2 再初始化 React Native 工程

在一个干净目录里创建 RN 工程（示例命令，版本和参数以你参考链接为准，这里给一个通用写法）：

npx @react-native-community/cli init MyApplication
cd MyApplication
npm install

4.3 按参考流程集成 React Native for OpenHarmony（RNOH）

这一段是 Day1 的核心，也是最容易卡住的地方。给自己设了 3 个“是否成功”的判断：

• 能启动 Metro（或者等价的 JS 打包服务）。
• OpenHarmony 壳工程能正常编译。
• 设备启动后能看到 RN 页面（哪怕先是默认 Welcome）。

4.4 启动 Metro

在 RN 工程目录执行：

npm start

会保持这个窗口一直开着。

4.5 回到 DevEco 运行 OpenHarmony 工程到真机

1. 选择设备。
2. 点击运行。
3. 第一次构建比较慢就耐心等，等它把依赖、缓存都准备好。

---

5. Day1 实战：

当确认设备上已经能看到 RN 页面后，把默认内容替换成一个小 Todo。

用它来验证三件事：

• 输入与新增是否正常
• 点击切换完成状态是否正常
• 删除是否正常

5.1 App.tsx

import React, { useMemo, useState } from 'react';
import {
  SafeAreaView,
  View,
  Text,
  TextInput,
  Pressable,
  FlatList,
  StyleSheet,
} from 'react-native';

type TodoItem = {
  id: string;
  title: string;
  done: boolean;
};

function createId() {
  // 轻量级 id 生成，避免引入额外依赖
  return `${

• 在新增时做了 trim()，避免空内容进入列表。
• 在切换完成状态时使用不可变更新，避免 UI 不刷新。
• 用 FlatList 的稳定 key（id）避免渲染错乱。

---

6. 运行结果截图

已经在鸿蒙设备上看到 React Native 页面成功启动。

---

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net