RN鸿蒙教学｜第2课时】Git进阶+React Native鸿蒙工程配置优化（多终端适配入门）

🎯【RN鸿蒙教学｜第2课时】Git进阶+RN鸿蒙工程配置优化（多终端适配入门）

哈喽大家好～ 欢迎来到React Native（RN）兼容开源鸿蒙（OpenHarmony）跨平台开发系列教学第2课时！🚀

上一课时我们已经打通了「RN+鸿蒙」开发的基础环境，完成了工程初始化与多终端调试验证，相信大家已经顺利搭建好属于自己的开发环境、创建了AtomGit仓库。

本课时作为基础阶段的核心衔接课，核心目标是帮大家吃透「Git版本管理」（开发必备技能）、优化AtomGit仓库配置，同时深化RN鸿蒙工程核心配置，解决多终端适配的基础问题，为后续核心功能（网络请求、列表开发）筑牢工程根基。

🎯 适合人群

已完成第1课时环境搭建，掌握基础Git配置，想要深入学习RN鸿蒙工程配置与版本管理的开发者

🎯 课时目标（90分钟达成）

1. 熟练掌握Git核心命令（clone/branch/commit/push/pull）及分支管理规范，能独立处理基础代码提交与更新；
2. 优化AtomGit仓库配置，符合开源项目管理标准，解决仓库提交常见问题；
3. 深化RN鸿蒙工程配置（模块依赖、权限声明、多设备适配参数），理解配置核心逻辑；
4. 排查多终端运行中的基础适配问题（布局错乱、编译失败），确保工程稳定运行。

---

🔧 一、课前准备（5分钟）

提前做好以下准备，避免课时内占用实操时间，确保高效跟随：

• ✅ 确认第1课时创建的RN鸿蒙工程（rnHarmonyDemo）可正常运行，多终端（模拟器/真机/开发板）能正常识别；
• ✅ 打开本地AtomGit仓库克隆目录，确保Git Bash/CMD能正常执行Git命令（验证：输入git --version，显示版本号）；
• ✅ 预习Git核心命令（clone/branch/commit/push/pull），记录自己预习中不懂的疑问（课时末尾统一答疑）；
• ✅ 准备好DevEco Studio、VScode（打开上一课时创建的RN工程）。

⚠️ 注意：若上一课时工程无法正常运行、Git命令执行报错，先快速回顾第1课时的问题排查环节，优先解决基础环境问题，避免影响本课时实操。

---

📚 二、核心知识点讲解（15分钟）

2.1 Git核心命令与分支管理规范（重点⭐）

Git是开发中不可或缺的版本管理工具，尤其是多人协作或多功能开发时，规范的命令使用与分支管理能大幅提升效率，避免代码冲突。结合RN鸿蒙开发场景，我们重点掌握以下核心逻辑：

• 核心命令定位：clone（克隆远程仓库）、branch（创建/查看分支）、commit（提交本地代码）、push（推送本地代码到远程）、pull（拉取远程代码到本地），这5个命令覆盖日常开发80%的场景；
• 分支管理规范（适配本系列教学，贴合企业开发标准）：
  ① main/master分支🔴：核心分支，仅存放可直接运行的稳定代码（最终成品代码）；
  ② feature分支🟢：功能分支，每开发一个新功能（如下节课的网络请求），创建一个独立feature分支（命名规范：feature-功能名称，如feature-network）；
  ③ ❌ 禁止直接在main分支开发、提交代码，所有功能开发完成后，再合并到main分支。

2.2 AtomGit仓库优化核心要点

上一课时我们仅完成了AtomGit仓库的基础创建，本节课重点优化仓库配置，让仓库符合开源项目管理标准，同时避免后续代码提交、拉取出现问题：

• 📝 README文件优化：补充工程说明、环境要求、运行步骤、核心功能，方便后续自己回顾或他人参考；
• 🗑️ .gitignore文件完善：忽略无用文件（node_modules、build、日志文件、IDE配置文件等），减少仓库体积，避免提交冗余文件；
• 📜 开源许可证补充：确认仓库许可证（如MIT）已正确配置，避免开源合规问题；
• 🌿 仓库分支配置：创建feature分支，规范后续代码提交流程。

2.3 RN鸿蒙工程配置核心逻辑

上一课时我们通过命令自动适配了RN鸿蒙工程，但很多同学不清楚配置文件的作用，本节课重点讲解核心配置文件，理解配置逻辑，才能解决后续适配问题：

• 📄 核心配置文件：package.json（RN依赖配置）、module.json5（鸿蒙权限、模块配置）、config.json（鸿蒙全局配置）；
• 🧩 模块依赖配置：package.json中RN与鸿蒙适配相关依赖的管理，避免依赖冲突；
• 🔑 鸿蒙权限声明：module.json5中声明应用所需权限（如网络权限，为下节课做铺垫）；
• 📱 多设备适配参数：配置应用支持的终端类型（手机、平板、开发板）、屏幕适配参数，避免多终端布局错乱。

---

💻 三、实操步骤（50分钟，重点环节）

本环节全程实操，衔接上一课时的工程与仓库，一步步完成Git进阶操作、仓库优化、工程配置深化，每一步都有验证环节，确保大家能扎实掌握。

3.1 步骤1：Git核心命令实操（15分钟）

结合RN鸿蒙工程，实操5个核心Git命令，掌握分支创建、代码提交、推送全流程，重点练习分支管理规范。

1. 查看当前Git状态与分支：

   ① 打开Git Bash，进入RN工程目录（cd rnHarmonyDemo）；

   ② 输入「git status」，查看当前代码状态（若显示"nothing to commit"，说明代码无修改）；

   ③ 输入「git branch」，查看当前分支（默认只有main分支，前面带*的是当前分支）；

2. 创建并切换feature分支：

   ① 输入「git branch feature-init-optimize」（创建功能分支，命名为"初始化优化"）；

   ② 输入「git checkout feature-init-optimize」（切换到该分支）；

   ③ ✅ 验证：输入git branch，确认当前分支为feature-init-optimize（*标注）；

3. 修改工程文件并提交：

   ① 用VScode打开工程，修改App.js文件（简单修改文本，如将"Hello React Native"改为"Hello RN HarmonyOS"）；

   ② 回到Git Bash，输入「git add .」（将所有修改的文件添加到暂存区）；

   ③ 输入「git commit -m "feat: 优化App页面文本，完善工程初始化配置"」（提交到本地仓库，commit信息规范：类型: 描述，类型常用feat/fix/docs等）；

   ④ ✅ 验证：输入git log，能看到刚才的提交记录即成功；

4. 推送本地分支到AtomGit远程仓库：

   ① 输入「git push origin feature-init-optimize」（将本地feature分支推送到远程仓库）；

   ② 若提示输入用户名和密码，输入AtomGit用户名和个人访问令牌（第1课时讲解过，忘记可重新生成）；

   ③ ✅ 验证：打开AtomGit仓库，能看到feature-init-optimize分支即成功；

5. 拉取远程代码（模拟多人协作场景）：

   ① 输入「git checkout main」（切换回main分支）；

   ② 输入「git pull origin main」（拉取远程main分支的最新代码，确保本地与远程同步）；

   ③ ✅ 验证：无报错即成功，若有冲突，后续课时讲解冲突解决。

💡 关键提示：commit信息一定要规范，避免使用"修改代码""完善功能"等模糊描述，方便后续查看提交记录、回溯问题。

3.2 步骤2：AtomGit仓库优化（10分钟）

基于上一步推送的分支，优化远程仓库配置，让仓库更规范、更易维护，同时完善本地仓库配置，保持本地与远程一致。

1. 完善本地README.md文件：

   ① 用VScode打开仓库根目录的README.md文件，输入内容（参考模板）：

   # RN鸿蒙跨平台开发Demo 🚀
   本项目是React Native兼容开源鸿蒙的跨平台开发Demo，基于RN 0.72.7 + 鸿蒙SDK 8.0开发。
   
   ## 环境要求
   - React Native：0.72.7
   - DevEco Studio：4.0+
   - 鸿蒙SDK：API Version 8+
   - Node.js：16.x+
   
   ## 运行步骤
   1. 克隆仓库：git clone 仓库地址
   2. 进入工程目录：cd rnHarmonyDemo
   3. 安装依赖：npm install
   4. 运行工程：react-native run-ohos --emulator（模拟器）

   ② 保存文件，回到Git Bash，输入「git add README.md」「git commit -m "docs: 完善README文件，补充环境要求与运行步骤"」；

2. 完善.gitignore文件：

   ① 打开.gitignore文件，添加以下内容（忽略RN与鸿蒙工程无用文件）：

   # RN相关 📱
   node_modules/
   npm-debug.log*
   yarn-debug.log*
   # 鸿蒙相关 �鸿蒙
   build/
   ohos-build/
   # IDE配置 💻
   .idea/
   .vscode/

   ② 保存文件，输入「git add .gitignore」「git commit -m "docs: 完善.gitignore，忽略冗余文件"」；

3. 推送优化内容到远程分支：

   ① 输入「git push origin feature-init-optimize」，将README和.gitignore的修改推送到远程；

   ② ✅ 验证：打开AtomGit仓库的feature分支，查看README.md和.gitignore文件，确认修改已生效。

3.3 步骤3：RN鸿蒙工程配置深化（15分钟）

理解RN鸿蒙工程的核心配置文件，修改关键配置，适配多终端，为后续功能开发（如下节课网络请求）做好准备。

1. 配置package.json依赖（避免依赖冲突）：

   ① 用VScode打开package.json文件，查看 dependencies 中的RN版本（确认是0.72.7）；

   ② 添加鸿蒙适配依赖：输入「npm install @react-native-ohos/adapter --save」（RN鸿蒙适配核心依赖，确保版本兼容）；

   ③ ✅ 验证：查看node_modules目录，确认@react-native-ohos/adapter已安装，无报错；

2. 配置鸿蒙权限与多终端适配（module.json5）：

   ① 打开工程目录下的ohos/main_pages/module.json5文件；

   ② 权限声明：在"abilities"数组中，添加网络权限（为下节课网络请求铺垫），添加内容：

   "requestPermissions": [{"name": "ohos.permission.INTERNET"}]

   ③ 多终端适配：在"deviceTypes"数组中，添加支持的终端类型，确保覆盖三类终端：

   "deviceTypes": ["phone", "tablet", "tv", "wearable", "smartVision"]

   （包含开发板适配）；

   ④ ✅ 验证：无语法报错（JSON格式严格，注意逗号、引号）；

3. 配置工程全局参数（config.json）：

   ① 打开ohos/config.json文件，查看"app"和"deviceConfig"配置；

   ② 修改应用名称：将"app.name"改为"RNHarmonyDemo"，"app.label"改为"RN鸿蒙Demo"；

   ③ ✅ 验证：保存文件，确保无语法报错；

4. 提交配置修改到本地仓库：

   ① 回到Git Bash，输入「git add .」「git commit -m "feat: 深化工程配置，添加网络权限与多终端适配"」；

   ② 推送至远程：「git push origin feature-init-optimize」。

3.4 步骤4：多终端运行验证与适配优化（10分钟）

完成工程配置优化后，验证工程在多终端的运行效果，解决基础适配问题（如布局错乱、编译失败），确保工程稳定运行。

1. 模拟器验证：

   ① 启动DevEco Studio模拟器（API Version 8）；

   ② 输入「react-native run-ohos --emulator」，编译运行工程；

   ③ ✅ 验证：应用正常启动，显示修改后的"Hello RN HarmonyOS"文本，无布局错乱；

2. 真机/开发板验证：

   ① 连接真机/DAYU200开发板（确保USB调试开启，驱动正常）；

   ② 输入「react-native run-ohos --device」，编译运行；

   ③ ✅ 验证：应用正常启动，文本显示正常，无卡顿、闪退；

3. 基础适配问题修复（若有）：

   ① 若出现布局错乱：打开App.js，修改文本样式，添加flex布局适配（如style={``{flex:1, justifyContent:'center', alignItems:'center'}}）；

   ② 若出现编译报错"权限未声明"：检查module.json5中的requestPermissions配置，确保网络权限添加正确；

   ③ 提交修复代码：若有修改，执行git add、git commit、git push命令，推送至远程分支。

---

❌ 四、常见问题与解决方案（10分钟，新手必看）

本课时实操核心是Git命令与工程配置，新手容易在分支操作、配置文件、代码推送环节踩坑，整理高频问题及解决方案，帮大家快速避坑：

1. 🚫 问题1：Git push报错「fatal: Could not read from remote repository」

   ✅ 解决方案：① 检查仓库地址是否正确（AtomGit仓库clone地址）；② 确认个人访问令牌有效，重新输入令牌验证；③ 关闭VPN，切换稳定网络，重试推送。

2. 🚫 问题2：commit信息不规范，想要修改已提交的记录

   ✅ 解决方案：输入「git commit --amend」，进入编辑模式，修改commit信息，保存退出（:wq），仅适用于未推送至远程的提交。

3. 🚫 问题3：module.json5配置报错「JSON syntax error」

   ✅ 解决方案：检查配置文件的逗号、引号、大括号是否配对，JSON格式严格区分中英文符号，避免使用中文逗号、引号，可使用VScode的JSON校验功能排查错误。

4. 🚫 问题4：多终端运行出现「布局错乱」（如文本偏移、内容溢出）

   ✅ 解决方案：RN布局适配鸿蒙终端，需使用flex布局，避免固定宽高；在样式中添加flex:1、justifyContent、alignItems等属性，适配不同屏幕尺寸。

5. 🚫 问题5：npm install安装依赖报错「版本冲突」

   ✅ 解决方案：删除node_modules目录和package-lock.json文件，输入「npm cache clean --force」清理缓存，重新执行「npm install」，确保RN版本为0.72.7。

---

📝 五、课堂小结（5分钟）

本课时核心完成了「Git版本管理进阶」和「RN鸿蒙工程配置深化」，衔接上一课时，重点掌握3个核心要点：

• 1. Git核心命令的实操的关键的是「分支规范」，避免直接在main分支开发，commit信息要清晰规范，方便后续回溯；
• 2. AtomGit仓库优化的核心是「减少冗余、规范说明」，完善README和.gitignore，让仓库更易维护；
• 3. RN鸿蒙工程配置的核心是「依赖兼容」和「多终端适配」，理解module.json5和config.json的作用，才能解决后续适配问题，本节课添加的网络权限的是下节课网络请求的基础。

本课时的内容虽然偏向基础配置，但却是后续开发的核心铺垫，只有吃透Git命令和工程配置，才能高效推进后续功能开发，避免不必要的踩坑。下一节课我们将进入核心功能开发环节，学习如何为RN鸿蒙工程集成网络请求能力。

---

✅ 六、课后任务（必做）

1. 复盘本课时Git核心命令实操，独立完成「创建分支→修改代码→提交→推送→拉取」全流程，熟练掌握分支管理规范；
2. 完善自己的AtomGit仓库，确保README、.gitignore、许可证配置齐全，feature分支推送成功；
3. 检查RN鸿蒙工程配置，确保网络权限、多终端适配参数配置正确，多终端运行无异常，将最终代码推送至远程feature分支；
4. 提前预习RN网络请求相关知识（axios基础用法），了解鸿蒙网络权限的作用，为下一节课做准备。

若你在实操过程中遇到Git命令、工程配置相关的问题，欢迎在评论区留言，我会逐一解答～ 下一节课，我们正式进入核心功能开发，一起搞定RN鸿蒙工程的网络请求能力！🚀

关注我，后续课时持续更新，从0到1掌握RN兼容鸿蒙跨平台开发，夯实每一个基础环节！

---

总结

1. Git进阶操作的核心是分支规范 （feature分支开发、main分支存稳定代码）和提交信息规范（feat/fix/docs等前缀+清晰描述）；
2. AtomGit仓库优化需重点完善README（工程说明）和**.gitignore**（冗余文件忽略），降低仓库维护成本；
3. RN鸿蒙工程配置的关键是依赖版本兼容 和多终端适配，网络权限声明是下节课实现网络请求的必要前提。

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