小叙：React Native新架构在鸿蒙的“奇妙”旅程

说实话，我刚把 RN 的 Fabric + TurboModules 扔进鸿蒙，心里还挺慌的。

哈哈，结果一折腾，竟然把老项目给活成了全平台通吃的样子。

咱就是说这玩意儿真是“跨三端”，iOS、Android、鸿蒙，一套代码全搞定。

不过别高兴太早，坑是永远踩不完的。

工程结构：文件层面的差异隔离

.harmony.tsx 后缀简直是福音。

同一个组件，在 iOS/Android 用 xxx.tsx，鸿蒙上只要改个后缀就行。

不需要 if 那种乱七八糟的判断。

所以我们把所有平台差异dou丢到独立文件里业务代码保持干净。

依赖管理：Patch‑Package 的日常

鸿蒙生态还在萌芽期，hen多第三方库根本不兼容。

我用了 patch‑package 给它们打补丁，记录在 patches/ 目录下。

每次 npm install 后自动跑脚本，把 .har 包重新打包进去。

这事儿kan着繁琐，但比起 fork 上游库维护成本低多了。

C‑API 架构到底怎么玩？

启用 enableCAPIArchitecture:true，React Native 就直接走 C++ 桥接 ArkUI。

省掉了 TS ↔ ArkTS 序列化的那层耗时也让 UI 渲染geng流畅。

不过要注意：原生模块必须用 RNOH 的 Package 注册，否则会报找不到模块的错误。

全局 Loading 的引用计数技巧

我们实现了一个全局 LoadingOverlay，用 requestCount Zuo引用计数。

每次发请求 ++，请求结束 --，计数归零才真正隐藏 Loading。

加个Zui小显示时间，防止闪烁——用户体验瞬间提升。

网络层的三类错误处理

ApiError、NetworkError、TimeoutError。

UI 层根据 error instanceof 判断展示不同提示，不再是一锅粥。

页面开发实战：从列表到详情的统一 Hook

我写了几个自研 Hook：usePaginatedList、useFilters、useDetailFetch。

列表页只要调 usePaginatedList，就Neng搞定下拉刷新、上拉加载、并发锁等功Neng。

筛选组件通过 resetSignal触发列表重新请求，实现了解耦合。

文件上传在鸿蒙的特殊处理

uri 在鸿蒙可Neng是 content:// 协议，需要先 copyFile 到临时目录再上传。

还有 FormData 的 Content‑Type 必须交给原生层自动生成，否则会报 Network Error。

路由适配：React Navigation 与 .harmony.tsx 的配合

.tsx 用 createNativeStackNavigator，.harmony.tsx 则换成 createStackNavigator。

这样写后即使原生 screens 在鸿蒙上不支持，也不会崩溃——仅仅是降级为 JS 实现而Yi。

为什么百度不收录？

A：内容质量不足、缺少原创性或技术细节太浅dou是常见原因。 Ru果文章里有大量复制粘贴、或者没有明确的标题结构、缺少关键字布局，就容易被百度判定为“低价值”。 另外Ru果页面没有合理的 meta 信息、robots.txt 阻止爬虫，也会导致不被收录。 所以写技术博客的时候，多写点实战经验、配上代码片段和真实案例，这样搜索引擎geng爱抓取，也geng容易上榜啦！

Sass/TSConfig 别名统一配置的小技巧

@/src/* 在 tsconfig.json、babel.config.js、metro.config.js 三处保持同步。 否则编译时Neng通过却在运行时找不到模块，那叫一个尴尬！

Echarts 与原生绘图的对比实验

Echarts 在 RN 上渲染会走 WebView，性Neng一般；而使用 Reanimated + Skia Ke以直接在 UI 线程绘制图表，帧率飙升到 60fps。 我们在鸿蒙上尝试了 Skia‑JSI，实现了流畅的折线图和柱状图，效果杠杠滴！

项目上线前必须检查的清单

*权限声明*: 鸿蒙需要在 config.json 中声明 file、camera 等权限，否则运行时报错；iOS/Android 则是 Info.plist / AndroidManifest.xml 配置好就行啦。

*版本检查*: 启动时调用 checkUpdate 接口，根据语义化版本号决定强制geng新还是可选geng新；Ru果用户忽略，则本地存储 ignoredVersion 防止 弹框骚扰用户。

*水印遮罩*: 用 View pointerEvents="none" 覆盖全屏水印，不影响交互，却Neng有效防止截图泄密。 这招企业级项目几乎必备，我公司Yi经用了两年，从未收到过泄密投诉！

Saga vs Redux Toolkit，你选哪个？

Saga 写起来像写剧本，一堆 generator，kan着高级但调试麻烦；Redux Toolkit 自带 createAsyncThunk，只要几行代码就Neng完成异步请求，还Neng自动生成 pending/fulfilled/rejected 三种状态。 我个人geng倾向于 RTK，因为团队成员大多数熟悉 Redux，学习成本低，而且配合 immer Neng免去手动深拷贝的痛苦。

PWA 思想搬进鸿蒙：离线缓存策略简述

PouchDB 在 RN 环境Ke以直接使用 IndexedDB 替代方案，实现离线数据存储。 我们把关键字典表放进本地缓存，每次启动先读取缓存再决定是否请求网络，这样即使没网也Neng正常打开表单页面。 别忘了设置 sync 同步策略，让后台自动把本地改动推送到服务器——这才是真正的离线优雅体验！

end of story——咱们一起撸起来吧！

---