08 · RN 原生模块、打包与多端总复盘

目标：建立原生模块 / 桥接直觉；掌握 Android / iOS 打包发布要点；用口述清单收束 PWA → Capacitor → uni-app → RN 四条路线。

1. 背景与目标

07 跑通了界面与导航。真实项目还会碰到：原生能力不够用、要打商店包。
本篇不写完整上架流水账，只建立「桥在哪、包怎么出、和前三条路线怎么选」的可复述框架。

2. 核心概念

2.1 桥接与原生模块（直觉）

JS 线程（React 树、业务）
    ↕ Bridge / JSI（实现随新架构演进，细节看官方）
原生模块（Kotlin/Java、Swift/ObjC）
    → 相机、蓝牙、推送、厂商 SDK…

层次	你怎么用
社区库	expo-camera、react-native-device-info 等；看是否支持 New Architecture
Expo Modules	Expo 体系内扩展原生能力的推荐方式之一
自写 Native Module	厂商 SDK 无现成封装时；成本高，需原生基础

心智：JS 调到原生是显式依赖；不要假设「Web 里能用的 API RN 里都有」。

2.2 打包发布要点

路径	特点
Expo EAS Build	云端出包，少配本地 Xcode/Android 环境；适合多数 Expo 应用
本地 release	android/ Gradle release、ios/ Archive；裸 RN 或 prebuild 后常见
签名	与 Capacitor / uni-app 相同本质：keystore / Apple 证书；丢失即灾难
版本	Android versionCode、iOS CFBundleVersion 递增
JS 包	Metro 打出的 bundle 打进安装包（或按官方拆包策略）

Expo 应用若只用到 Expo Go 支持的 API，开发快；要用自定义原生代码时，走 dev client / prebuild，再 EAS 或本地编——以 Expo 文档「Add custom native code」为准。

2.3 与「插件」对照（跨系列）

体系	扩展原生的名字
Capacitor	Capacitor Plugins
uni-app	原生插件 / 插件市场
RN	Native Modules / Expo Modules

都是「JS 调原生」；文档、生命周期、打包是否含该模块各走各的，不要混命令。

3. 最小实践

3.1 用一个「带原生」的库（示意）

在 Expo 项目中安装官方推荐的模块（例：安全区已随导航装过；可再试 expo-secure-store 或 expo-haptics）：

npx expo install expo-haptics

在按钮 onPress 里触发一次触觉反馈，真机验证（模拟器可能弱或无）。

3.2 打包认知练习（二选一）

A. EAS（推荐认知）

1. 读 EAS Build 文档：建 eas.json、配置 profile
2. 知道 preview（内测）与 production 差异
3. 不必本篇就提交商店，但要能说出「云端编包 → 下载安装包 / 提交」链路

B. 本地 Android release（裸或 prebuild 后）

1. 生成或配置签名
2. ./gradlew assembleRelease（路径以工程为准）
3. 安装 APK，确认 JS 更新需重新打包含入的 bundle

3.3 四条路线选型口述稿（面试可用）

背思路不背形容词：

1. 只要浏览器安装与弱网外壳 → PWA；更新靠 SW，不进国内应用商店主战场。
2. 已有 Vite/Vue/React 站点，要进商店且接受 WebView → Capacitor；插件补原生。
3. 主战场微信等小程序，Vue 团队，顺带 App → uni-app；打包走云/本地与插件市场（Journal 现状）。
4. 要原生控件体验、列表性能敏感、团队会 React → RN；扩展靠 Native/Expo Module，打包 EAS 或本地。

加一句否决：例如「必须微信小程序」→ 否决纯 PWA / 纯 Capacitor 作为唯一方案。

3.4 面试能讲清单（勾选）

• [ ] 讲清 WebView 壳 vs 原生控件渲染
• [ ] 讲清 uni-app「编译到多运行时」与 RN「一套 RN 运行时双端」差异
• [ ] 讲过一次 SW 更新或 cap sync 或小程序上传或 EAS 其中至少两条实操
• [ ] 诚实边界：没上过架就说「走通构建与内测包」，不吹「全端专家」

4. 踩坑与取舍

1. Bridge 同步重活：卡 JS 线程 → 掉帧；重计算下放原生或拆分。
2. 随便链 GitHub 上的 native 库：New Architecture / 版本不匹配会编不过。
3. Expo Go 里能跑 ≠ 正式包能跑：自定义原生必须用 dev client / 正式构建验证。
4. 四条路线都学一点都不收口：用 01 的选型卡 + 本篇口述，选一条做深。
5. 简历写「精通多端」：对照 技术栈自评，只写能讲链路的。

5. 验收清单

• [ ] 能画（或口述）JS ↔ 原生模块的调用方向
• [ ] 知道 EAS 与本地 Gradle/Xcode 出包各自适用场景
• [ ] 真机验证过至少一个带原生能力的 API
• [ ] 四条路线选型口述 ≤ 2 分钟，含一个否决例
• [ ] 回顾 01 选型卡，更新「当前主攻路线」与下一步实验

6. 系列收束

01 选型心智 → 02 PWA 工程 → 03～04 Capacitor
→ 05～06 uni-app 打包（对照 Journal）→ 07～08 RN + 复盘
→ 09～14 RN 深潜（Fabric / 手势动画 / 系统能力 / 组件）

选型口述到此可收口。若要继续啃 RN 底层与系统能力：

→ 09 · Fabric 三线程与渲染流水线

下一步自学建议（自选）：

• 把 PWA demo 与 Capacitor 打通同一 dist
• Journal：整理一份「小程序发版检查单」挂团队 wiki / 个人便签
• RN：做一个带 Tab + 一个原生模块的小周项目，EAS 打出 preview 包

→ 返回 系列 README

参考链接

• https://reactnative.dev/docs/native-modules-intro
• https://docs.expo.dev/modules/overview/
• https://docs.expo.dev/build/introduction/
• https://reactnative.dev/docs/signed-apk-android
• https://reactnative.dev/docs/publishing-to-app-store
• 01 · 多端路线图与选型心智