本次学习围绕OpenHarmony 版 React Native 开发全流程展开，从环境搭建、代码托管，到功能开发与交互优化，形成了一套完整的跨平台应用开发链路。

我的笔记：

1.https://blog.csdn.net/2503_90348972/article/details/157266531?spm=1011.2124.3001.6209

2.https://blog.csdn.net/2503_90348972/article/details/157300359?spm=1011.2124.3001.6209

3.https://blog.csdn.net/2503_90348972/article/details/157326776?spm=1011.2124.3001.6209

4.https://blog.csdn.net/2503_90348972/article/details/157393544?spm=1011.2124.3001.6209

一、 基础环境搭建（核心：版本兼容 + 工具配置）

核心目标：搭建 Windows 11 下 OpenHarmony 版 React Native 开发环境，完成 RN 项目与鸿蒙工程的集成。

1. 必备工具
   • 基础开发工具：VS Code、DevEco Studio、Node.js、JDK
   • 鸿蒙专属工具：ohpm 包管理工具，需配置环境变量
2. 关键步骤
   • 初始化 RN 项目：指定版本npx react-native@0.72.5 init 项目名 --version 0.72.5
   • 安装鸿蒙化依赖：npm i @react-native-oh/react-native-harmony@0.72.90
   • 生成 bundle 文件：npm run harmony，文件输出到鸿蒙工程的 rawfile 目录
   • 鸿蒙工程集成：通过 DevEco Studio 创建空工程，添加 RNOH 依赖，补充 CPP 和 ArkTS 侧代码，替换入口 Ability 为 RNAbility
3. 常见问题
   • 提示 “Missing script: harmony”：检查 package.json 脚本配置，重启终端
   • DevEco 依赖标红：同步依赖 + 清除编辑器缓存
   • 命令无法识别：清除 npm 缓存npm cache clean --force，重新安装依赖

二、 代码托管：本地 RN 项目与 AtomGit 远程同步

核心目标：实现本地代码云端托管，解决跨平台协作中的 Git 问题。

1. 核心流程
   • AtomGit 新建项目：配置名称、权限，生成 README.md 和.gitignore
   • 本地 Git 配置：全局设置用户名和邮箱
   • 提交与推送：git add . → git commit -m "提交信息" → git push origin main
2. 问题与解决方案
   • 换行符冲突警告：Windows 默认 CRLF 与远程 LF 不一致，可忽略或设置git config core.autocrlf false
   • 分支名称不匹配：远程默认 main 分支，推送命令需用git push origin main而非 master
   • 远程历史冲突：执行git pull origin main --allow-unrelated-histories合并后再推送

三、 功能开发：网络请求与数据列表实现

核心目标：基于 Axios 实现网络请求，完成数据列表展示，适配 OpenHarmony 平台。

1. 技术栈：React Native 0.72.5 + TypeScript + Axios + OpenHarmony
2. 关键实现
   • 网络权限配置：在harmony/entry/src/main/module.json5中添加ohos.permission.INTERNET权限
   • 数据层设计：定义 Post 接口，封装 postService 处理 API 请求
   • UI 层实现：在 HomeScreen 中用 useState+useEffect 管理数据、加载、错误状态，用 FlatList 渲染列表
   • 导航实现：通过自定义 BottomTabBar 和 AppRoot 实现底部标签页切换
3. 运行命令：npm run harmony生成 bundle，在 DevEco Studio 启动模拟器运行

四、 交互优化：上拉加载 + 下拉刷新实现

核心目标：基于 RN 内置组件自定义列表交互功能，解决鸿蒙平台兼容性问题。

1. 功能实现
   • 下拉刷新：使用RefreshControl组件，通过refreshing状态控制刷新状态，onRefresh触发数据重新请求
   • 上拉加载：利用 FlatList 的onEndReached属性，结合onEndReachedThreshold阈值触发加载更多，通过 ListFooterComponent 展示加载状态
2. 鸿蒙平台特有问题与解决
   • 刷新动画卡顿：用 useCallback 缓存刷新函数，React.memo 包裹列表项，减少重渲染
   • 手势识别失效：调整触发阈值，添加scrollEventThrottle提高响应速度
   • 加载状态异常：统一状态管理，添加状态锁避免重复请求，组件卸载时清理异步请求

五、 学习总结

1. 核心要点
   • 版本兼容是基础：RN、RNOH 依赖、鸿蒙 SDK 版本需严格对应
   • 鸿蒙平台适配关键：权限配置、入口 Ability 替换、bundle 文件生成与集成
   • 跨平台开发技巧：优先使用 RN 内置组件，自定义实现规避第三方库兼容性问题

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