移动端跨平台开发：从原生 iOS/Android 到 React Native / Flutter 与原生桥

0. 元信息

• 主题路径：docs/topics/mobile-cross-platform/README.md
• 主分类：前端与客户端
• 辅助分类：工程技术
• 适合对象：会写 React 或 Python、想做移动端 App 并理解 RN/Flutter 与原生层交互的开发者
• 建议周期：6～10 周（每周 8～12 小时，至少一半时间用于真机/模拟器实验与原生桥调试）
• 前置知识：lang-python、react-app；会 npm/pnpm、命令行、TypeScript 与 React Hooks
• 最终目标：拿到一个移动端产品需求，能在 React Native 与 Flutter 之间做出技术选型，独立完成一个跨平台 App，并理解 JSI / Hermes / 原生模块 / 离线同步 / 平台发布的全部边界

1. 学习路线

原生 iOS / Android 基础（Swift / Kotlin、Activity / ViewController、生命周期）
  → React Native 架构（JS 引擎、Bridge / JSI / Hermes、Fabric / TurboModules）
  → Flutter 与 Dart（Widget / Element / RenderObject、Skia、isolate、Platform Channel）
  → 跨端性能、启动、JSI / 原生模块、离线同步、测试、App Store / Play 发布

按「先懂原生层 → 再学跨端框架 → 最后回到原生桥与发布」的顺序。先用 Xcode / Android Studio 真机调试一遍，再用同一份业务需求分别用 RN 和 Flutter 实现，对比启动时间、内存、JS / Dart 隔离模型与原生调用边界。

2. 阶段周数分配

6 周方案只跑通 RN 路线；10 周方案多出时间分别用 RN 和 Flutter 同一份业务实现一份做对比。综合项目占最后一周。

3. 九阶段表

关键陷阱：把 RN / Flutter 当浏览器；忽略原生层是「最终真相来源」；忽略启动时间；用单一存储方案；忽略签名与权限；把 e2e 测试当可选。

4. 第一周任务

Day 1 约定：本计划以 macOS + Xcode 15+ / Android Studio Hedgehog+ + 真机为最小实验环境。Windows / Linux 用户用 Android 模拟器 + 远端 Mac 跑 iOS。Node ≥ 20、Dart ≥ 3.4、Java 17、Kotlin 1.9+、Swift 5.9+。所有命令记录版本、设备型号、操作系统版本和日期。

Day 7 步骤 A 只求业务完整：列表 → 详情 → 网络。步骤 B 每次只改变一个条件（关闭 ATS、旋转屏幕、空数组、拒绝定位）。

5. 阶段通用验收

1. 不看答案独立重写原生 / RN / Flutter 的最小工程；
2. 用自己的话解释 Bridge / JSI / Hermes / Skia / Platform Channel 各自解决什么问题；
3. 画一张图：JS 线程 / Native 线程 / UI 线程的调用时序；
4. 测试正常路径、生命周期异常、空数据、权限拒绝、网络 5xx 四类边界；
5. 至少准备 3 组自定义数据集（用户、商品、订单任选其一）并贴出实际渲染结果；
6. 记录冷启动时间、JS bundle 大小、内存峰值、P99 帧时间 4 个核心指标；
7. 能修改既有 App 加原生模块、加离线缓存、加 e2e 测试，并验证差异。

6. 最终验收

• 独立画出原生 / RN / Flutter 的渲染模型对比图，能讲清 Bridge → JSI → Hermes 的演进；
• 完成至少 30 个实验：原生两端各 5 个、RN 10 个、Flutter 8 个、发布 2 个；
• 在 RN 与 Flutter 之间做出有证据的选型判断（启动 / 内存 / 团队技能 / 生态）；
• 完成 1 个综合项目：跨端 Todo / 电商 Demo / IM 客户端，含原生模块、离线存储、e2e 测试与一次 TestFlight 发布；
• 能用 15 分钟讲清「为什么这个 App 选 RN / Flutter、为什么这块逻辑必须走原生桥、签名怎么管理、审核驳回怎么应对」。

7. 综合项目

首选：用 React Native（New Architecture）实现一个支持离线 Todo + 原生相机扫一扫 + Sentry 接入的 App，并跑通 TestFlight / Play 内部测试发布。

• 必输出：（1）完整工程 + New Architecture 配置证据；（2）JSI / TurboModule 调用原生相机的代码；（3）Realm / SQLite 离线同步实现；（4）Detox / Maestro e2e 测试用例 ≥ 10 条；（5）一次真机冷启动 + P99 帧时间性能报告；（6）TestFlight 邀请链接 + Play 内部测试轨道截图；
• 关键指标：冷启动 < 1.5s、列表 P99 帧时间 < 16ms、JS bundle < 5MB（拆包后）、离线写入冲突可解释；
• 进阶可选：接入 Reanimated 3 worklet、对接 Codegen 自定义 TurboModule、对接 OpenTelemetry Mobile SDK。

备选：用 Flutter 3 实现同一份需求。
备选：用 RN + Flutter 各自实现一个电商商品列表，对比启动时间、滚动帧时间、内存峰值。
备选：把一个既有原生 App 拆成 RN/Flutter 跨端壳 + 原生业务模块。

任何综合项目都必须包含：

1. 需求与成功标准（启动 / 帧时间 / 包大小 / 离线可用性）；
2. 技术选型对比表（RN vs Flutter vs 原生）；
3. 跨端架构图（JS / Dart 线程、Native 线程、UI 线程）；
4. 关键代码（原生模块 / Platform Channel / JSI / TurboModule）；
5. 离线存储方案与冲突解决（Realm / SQLite / Drift / MMKV）；
6. e2e 测试用例 + Detox / Maestro 报告；
7. 真机性能报告（启动、帧时间、内存、流量）；
8. 发布与签名记录 + 复盘 notes/retrospective.md。

8. 推荐开源资料

默认使用顺序：先用 Apple / Android 官方文档把原生层跑一遍 → 用 RN / Flutter 官方文档建工程 → 看 New Architecture / Flutter Engine 原理 → 用 Detox / Maestro 写 e2e → 用 TestFlight / Play 内部测试跑一次真实发布 → 写复盘到 notes/retrospective.md。

9. 学习资料汇聚（v0.3 自包含）

本节由本计划生成。链接指向原始材料或作者公开内容。SDK 与框架会演进，实验记录必须写明版本与日期。

9.1 背景与动机

移动端开发在 2008 年 App Store 与 Android Market 上线后进入「原生时代」。iOS 用 Objective-C 与 Cocoa Touch，Android 用 Java 与 Dalvik／ART。两端代码无法共享，团队必须双倍投入。

2015 年 Facebook 开源 React Native，把 JavaScript 与 React 渲染模型搬上移动端，桥（Bridge）让 JS 与 Native 互调。2017 年 Google 发布 Flutter 1.0，用 Dart 与自绘 Skia 直接画像素，绕开 OEM Widget。2022 年 RN 团队把 Bridge 替换为 JSI + Hermes + Fabric + TurboModules，开启 New Architecture。2024 年 Flutter 3 把 Impeller 推到 iOS，2025 年推到 Android，绘图引擎从 Skia 转向 Impeller。

今天移动端跨平台的核心问题不再是「能不能用」，而是「如何平衡启动时间、内存、JS / Dart 与 Native 的隔离模型、团队技能与生态成熟度」。RN 偏「用 JS 调原生能力」，Flutter 偏「完全自绘、最少原生依赖」。选择哪个，决定了未来三年的工程结构。

9.2 概念地图

flowchart LR
  Native[原生 iOS / Android] --> Swift[Swift / Kotlin]
  Swift --> Lifecycle[生命周期 / ARC / Compose]
  RN[React Native] --> Bridge[Bridge 历史]
  Bridge --> JSI[JSI + Hermes]
  JSI --> Fabric[Fabric 渲染]
  JSI --> Turbo[TurboModules]
  Turbo --> Native
  Flutter --> Dart[Dart isolate]
  Dart --> Widget[Widget / Element / RenderObject]
  Widget --> Skia[Skia 渲染]
  Skia --> Impeller[Impeller iOS / Android]
  Dart --> Channel[Platform Channel]
  Channel --> Native
  Perf[性能 / 启动] --> Native
  Perf --> RN
  Perf --> Flutter
  Store[离线存储] --> Realm
  Store --> SQLite
  Store --> Drift[Drift / sqflite]
  Store --> MMKV
  Test[E2E 测试] --> Detox
  Test --> Maestro
  Publish[平台发布] --> iOS[App Store Connect]
  Publish --> Android[Play Console]

核心关系：原生层是最终真相来源；RN 通过 JSI 直接调 C++ 与原生模块；Flutter 通过 Platform Channel 调原生能力但渲染完全自绘；性能 / 启动 / 存储 / 测试 / 发布是横向兜底层，跨前 3 阶段。

9.3 基础知识讲解

9.3.1 经典论文 / 规范

9.3.2 经典书籍

9.3.3 优秀博客

9.3.4 核心人物

9.3.5 开发方法

9.3.6 重点训练材料

• Apple Human Interface Guidelines：理解 iOS 设计语言与 Navigation 范式。
• Material Design 3：理解 Android 设计语言与 Compose 范式。
• React Native New Architecture 仓库讨论：理解 Bridge → JSI 演进。
• Flutter Engine 源码：理解 Widget / Element / RenderObject 三棵树与 Skia / Impeller。
• App Store Review Guidelines + Play Console Policies：理解审核红线（2.3.1、4.0、隐私清单）。
• Detox 文档 + Maestro 文档：端到端测试框架对比。

9.4 经典问题与经典案例

9.5 学习难点

概念难点

思维难点

工程难点

9.6 技术标准与接口

9.6.1 Entity

9.6.2 Scope

• Swift / Kotlin：原生层语言，承担系统调用、生命周期、性能关键路径。
• React Native：JS 渲染 + JSI 调原生能力；UI 由 Fabric 接管。
• Flutter：自绘渲染 + Dart isolate；只通过 Platform Channel 调原生能力。
• TurboModules / Platform Channel：跨端与原生的桥，规范调用与序列化。
• Detox / Maestro：E2E 测试框架，规范 UI 自动化步骤。
• App Store Connect / Play Console：发布与审核入口，签名与隐私清单集中地。

9.6.3 Structure

• RN 工程结构：android/ + ios/ + src/（JS / TS）+ metro.config.js。
• Flutter 工程结构：lib/ + android/ + ios/ + pubspec.yaml。
• 必会接口：TurboModule Codegen Spec（TS / Swift / Kotlin）、MethodChannel / EventChannel、Reanimated worklet、Flutter compute / Isolate.run、Detox by.id / Maestro tapOn。
• 必会命令：xcodebuild、gradlew assembleDebug、adb install、fastlane match、eas build、flutter build。

9.6.4 Ecosystem

• 原生工具：Xcode、Android Studio、Instruments、Android Profiler、Layout Inspector。
• RN 生态：Expo、React Navigation、Reanimated、FlashList、Zustand、MMKV、Sentry、CodePush。
• Flutter 生态：FlutterFire、Flutter Packages、Riverpod / Bloc、Drift、go_router、Flutter Hooks、Sentry。
• 跨端 CI：Fastlane、EAS Build、Bitrise、Codemagic。
• 监控：Sentry、Firebase Crashlytics、Datadog Mobile RUM、OpenTelemetry Mobile SDK。
• 测试：Detox、Maestro、XCTest、Espresso、JUnit、Flutter test、Patrol。

9.6.5 Depth Tiers

本计划目标：L3。综合项目可触及局部 L4，但不作为 6~10 周的硬门槛。

9.6.6 Source

• Apple Developer Documentation
• Android Developers
• React Native Documentation
• Flutter Documentation
• React Native New Architecture discussions
• Flutter Engine source
• App Store Review Gui
• Play Console Policies
• 引用版本快照日期：2026-07-30。规范与 SDK 会演进，使用前再核对当前版本。

10. 常见误区

• 把 RN / Flutter 当浏览器，忽略原生层线程模型；
• 在 RN 旧文档上花时间学 Bridge，忽略 New Architecture；
• 在 Flutter 上习惯共享内存，忽略 isolate 消息传递；
• 启动时间只看 JS bundle 大小，忽略 Native init + 首帧渲染；
• 离线存储只考虑写入，不考虑冲突解决；
• Detox / Maestro 写完不接 CI；
• 用 long-lived Keystore 提交 Play，丢失后无法升级；
• iOS Privacy Manifest 不填，审核被驳回；
• 用 Crashlytics / Sentry 当监控就够了，不接 APM；
• 把 React Native Reanimated 当普通 JS 动画；
• 把 Flutter 当「Java 写 UI」思维，写同步阻塞代码；
• 综合项目只跑模拟器，不上真机；
• 学完不复盘，下次跨端选型依然拍脑袋。

11. 所有知识点分类（统一规则）

1. 编程语言
2. 数据结构与算法
3. 计算机基础
4. 工程技术
5. Web 与后端
6. 前端与客户端
7. 数据与人工智能
8. 项目与职业能力
9. 安全与可靠性

本计划归属：前端与客户端 主 + 工程技术 辅。