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

前言

       本文为开源鸿蒙跨平台开发第二阶段Day8~Day14完整复盘总结，围绕底部选项卡开发、axios 三方库接入、收藏 / 评论功能实现、页面状态持久化、BUG 修复及博文合规化优化展开。剔除纯流程化内容，聚焦问题场景、排查思路、底层原因、解决方案、工程化优化，形成可复用、可复现的 RN + 鸿蒙跨平台开发实践体系。

一、阶段整体概述（Day8~Day14）

本阶段以美食博客类 APP为开发载体，基于React Native for OpenHarmony 0.72.5技术栈，完成从页面框架搭建、核心交互实现、三方库集成，到全功能联调、BUG 修复、代码规范、复盘优化的完整开发闭环。

核心开发脉络：

• Day8~Day10：底部 Tab 导航搭建、四大页面（首页 / 食谱 / 我的 / 设置）开发、页面切换与基础布局适配；
• Day11~Day12：axios@1.6.7 三方库标准化接入、网络请求封装、收藏功能实现与状态持久化；
• Day13：新增评论完整功能、收藏 / 评论本地存储联动、全功能联调与遗留 BUG 修复；
• Day14：全阶段知识复盘、博文合规化优化、技术深度补充、一致性校验与工程质量升级。

二、核心功能实现与技术落地（无纯流程，只讲深度）

2.1 底部选项卡：解决切换状态丢失与多终端适配

本阶段初期实现底部四 Tab 导航时，出现切换页面后列表状态重置、滚动位置丢失、小屏布局错乱等典型问题。

问题场景

Tab 切换后，食谱列表滚动位置归零、加载状态重置、收藏星标状态清空，本质是RN 页面卸载导致内存态数据销毁，且未做状态持久化与页面缓存。

排查过程

1. 定位 React Navigation 生命周期机制，Tab 非激活页会执行 unmount；
2. 确认 FlatList 无状态缓存，滚动偏移量未本地记录；
3. 鸿蒙端尺寸单位与屏幕安全区适配缺失，导致小屏文字挤压、Tab 项错位。

解决方案

1. 使用useFocusEffect监听页面聚焦，替代useEffect避免重复渲染；
2. 通过useRef持久化存储滚动偏移，页面重新聚焦时自动恢复位置；
3. 采用Dimensions动态计算屏幕宽度，均分 Tab 宽度，限制字体与图标最大尺寸；
4. 鸿蒙底部安全区增加内边距补偿，防止系统手势区遮挡导航栏。

技术价值

实现了跨页面状态不丢失、多终端尺寸自适应、切换无卡顿的底部导航能力，是 RN + 鸿蒙中高复用性的导航优化方案。

2.2 三方库 axios 接入：鸿蒙兼容适配与工程化封装

本阶段按任务要求接入axios@1.6.7（开源鸿蒙官方兼容清单指定版本），重点解决依赖识别、网络权限、拦截器统一处理、鸿蒙工程配置同步问题。

典型问题

• npm 安装后鸿蒙工程oh-package.json5未同步依赖，导致编译提示模块不存在；
• 未声明ohos.permission.INTERNET，请求直接失败无报错；
• 间接依赖出现漏洞提示，强制修复会导致 RN 版本越界冲突。

处理策略

1. 只安装指定版本axios@1.6.7，不执行audit fix --force，避免破坏鸿蒙兼容环境；
2. 手动将 axios 写入oh-package.json5依赖节点，完成鸿蒙工程依赖绑定；
3. 封装单例 axios，加入请求 / 响应拦截器、超时控制、统一错误捕获，支持后续接口扩展；
4. 在module.json5声明全局网络权限，保证鸿蒙沙箱网络访问合法。

技术深度

       axios 在 RN + 鸿蒙中属于纯 JS 三方库，无原生交互，因此兼容性极高，适合作为跨平台统一网络请求方案，避免使用含原生代码的三方库导致适配成本剧增。

2.3 收藏功能：从 “瞬态” 到 “持久化” 的完整修复

开发初期收藏星标点完切页就消失、我的收藏不显示数据，是本阶段最核心 BUG。

根本原因

仅使用useState做页面内状态管理，属于内存临时状态，页面卸载即清空，未做本地持久化，也未与我的页面做数据联动。

优化方案

1. 构建统一本地存储工具类，支持增 / 删 / 查收藏数据；
2. 点击星标时同步写入存储，而非仅修改页面状态；
3. 页面onFocus时从存储读取状态，自动渲染已收藏项；
4. 我的收藏页面实时监听存储变化，保证双向同步。

最终实现：切页不丢状态、重启 APP 不丢数据、多页面数据一致。

2.4 评论功能：完整业务闭环与交互体验升级

Day13 新增评论发布、评论展示、我的评论、删除评论全流程功能，与收藏共用存储体系，形成统一本地数据管理模型。

功能亮点：

• 评论弹窗支持输入、取消、提交，提交后轻提示反馈；
• 自动记录食谱名称、评论内容、提交时间，结构标准化；
• 我的评论页面支持单条删除，删除后存储同步更新；
• 空状态、加载状态、异常状态全覆盖，体验完整。

该模块验证了RN + 鸿蒙本地数据复用、多页面数据联动、组件化弹窗的工程化能力。

三、运行效果与工程验证

3.1 食谱列表与评论发布功能

实现评论弹窗、输入、提交、成功提示，UI 布局贴合整体风格，无错位、无遮挡。

3.2 我的评论页面

展示关联食谱、评论内容、时间、删除按钮，数据持久化，删除实时同步。

3.3 工程编译与启动成功日志

集成 axios、完成全功能后，在开源鸿蒙模拟器编译、安装、启动均无崩溃、无红屏、无依赖报错。

四、全阶段 BUG 复盘与核心经验总结

4.1 高频问题汇总

1. Tab 切换状态丢失 → 解决方案：useFocusEffect + useRef 持久化
2. 收藏星标切页消失 → 解决方案：本地存储 + 页面聚焦重刷
3. axios 安装后鸿蒙识别失败 → 解决方案：同步 oh-package.json5
4. 网络请求失败 → 解决方案：添加鸿蒙 INTERNET 权限
5. 小屏布局错乱 → 解决方案：动态宽度 + 安全区适配
6. 依赖漏洞警告 → 解决方案：不强制修复，保持指定兼容版本

4.2 RN + 鸿蒙开发核心经验

1. 纯 JS 三方库优先使用，在鸿蒙上兼容性最高，几乎零适配成本；
2. 页面状态务必做持久化，内存状态在 Tab 切换下不可靠；
3. 鸿蒙工程必须同步oh-package.json5，否则依赖不生效；
4. 网络、存储、弹窗等能力尽量封装成工具类，便于多页面复用；
5. 开发完成后必须在鸿蒙真机 / 模拟器验证，Web 端与鸿蒙端表现存在差异。

五、阶段总结与后续规划

Day8~Day14 完成了从框架搭建 → 功能开发 → 三方库接入 → 交互闭环 → BUG 修复 → 全复盘优化的完整工程流程，不仅实现了一个可直接运行的 RN + 鸿蒙美食 APP，更形成了一套标准化、可复用、合规化的跨平台开发与博客输出体系。

后续将继续深入：接口联调、图片优化、性能监控、深色模式、多端自适应打包等高阶能力，持续构建完整的开源鸿蒙跨平台开发实践。

六、代码仓库说明

Day8-13 阶段的代码已按规范提交至 AtomGit 仓库，包含三方库配置、收藏功能逻辑等完整代码，可直接拉取复现：

仓库地址：https://atomgit.com/xxxxxy1220/hellogitt.git