React Native跨平台移动开发实战

教程导读：React Native跨平台移动开发实战

为什么同样的 React 组件，放进 iOS 模拟器里规规矩矩，搬进 Android 真机就开始走样？这个让无数团队彻夜排查的问题，答案并不玄学——它藏在 React Native 的底层架构里。这套框架的全部秘密，可以用这样的比喻讲明白：同样的种子撒进不同的土壤，开出的花相似，扎下的根却各有姿态。React Native 就是那粒种子，土壤则是 iOS 与 Android 各自的平台栈；本教程每到某个知识点，都会把双方的表现并列对照，让你看清 JavaScript 代码如何在不同的土壤里各自扎根、开花，又如何结出体验统一的果实。

我们把这条贯穿全册的主线称为「组件两端开花」。这个名字来自 React Native 的本质：开发者用 React 的声明式写法描述界面，框架再把这份描述分别翻译成 iOS 侧的原生视图与 Android 侧的原生视图。翻译工作由架构层完成，而架构本身正处在换代期——旧时代的 Bridge 异步消息桥，正在被 JSI 直调、Fabric 渲染器与 TurboModules 组成的新架构取代。从 0.70 版本起 Hermes 成为默认引擎，0.76 版本起新架构默认开启。版本演进改变的不只是性能数字，更是两端差异的表现形式：旧时代最常见的毛病是桥接拥堵导致的列表卡顿，新时代则更多是接口适配与升级迁移的阵痛。理解这条演化线，你才能判断网上搜到的经验哪些已经过时、哪些仍然适用——这也是本册在每个知识点上都标注「旧架构怎样、新架构怎样」的原因。

这本教程写给谁

三类人能从本册拿到不同的东西。已有 React 或前端基础、想进入移动端的工程师，会沿着熟悉的组件思维直接上手，重点补齐原生侧的心智模型；带原生背景、想借跨平台提效的 iOS 与 Android 开发者，可以借双端对照的讲法快速定位概念差异，重点看组件、状态与构建三章；需要在技术选型会上给出结论的负责人，第 1 章的三路线对比与第 6 章的性能边界分析，就是为这类决策准备的弹药。

阅读门槛刻意压低了：不要求任何原生开发经验。只有在原生模块与构建发布两章，Swift 与 Kotlin 侧的代码才会成段出现，而且每一段都配了逐行解释。

全册知识地图

全册共八章，学习路线按依赖关系组织：先打底，再上手，然后进阶，最后工程化。第 1 章建立选型判断力与环境，第 2 章拆开引擎盖看架构——这两章决定你「懂不懂」；第 3 章组件与样式、第 4 章状态与数据、第 5 章导航与路由是日常开发的主战场——这三章决定你「能不能干活」；第 6 章性能与第 7 章原生桥接是拉开差距的地方；第 8 章把成品送出门并长期守护。下图标注了章与章之间的依赖：虚线是「强烈建议先学」的硬依赖，实线是「学了更好」的软依赖。

图：全册知识地图与学习依赖

时间紧张时存在一条最短路径：01 到 03 到 04 再到 08，够你把一个简单应用从零做到能安装。但如果项目要长期活下去，02 与 07 决定了你能走多远——不懂架构，性能问题会变成玄学；不懂桥接，每接入一个原生能力都要求人。

怎么使用每一章

每章从支柱页开始读：它给出本章要解决的核心问题、可检验的学习目标、一张概览图与各节导航，相当于章内的地图。进入节之后，先看节首摘要定位这个知识点在全册坐标系里的位置，再跟着代码动手。全册代码示例默认在 iOS 与 Android 上都能运行，凡是两端行为有差异的地方，都会用对照表或标注显式点出，而不是含糊地说「可能有差异」。

三件使用约定先说清楚。其一，书中示例基于新架构默认开启的近期版本编写，涉及旧架构行为时会单独说明，方便维护老项目的读者对照。其二，跨章引用全部用章号表示，比如「详见第 6 章」，顺着章号翻即可。其三，每节末尾的要点回顾是压缩饼干，复习时只读它们就够了，但首次学习请老老实实跟着代码敲——移动端的手感是敲出来的，不是读出来的。

动手前的准备

环境清单在第 1 章会逐步展开，这里只提醒三件事：把 Node.js 升到活跃的长期支持版本；macOS 用户装好 Xcode，Windows 与 Linux 用户装好 Android Studio；强烈建议手边有一台 Android 真机，因为大量两端差异——返回键行为、权限弹窗样式、字体缩放——只在真机上暴露得充分。iOS 侧没有 Mac 的话，可以先把重点放在 Android 上跑通，涉及 iOS 专有配置的段落留待有条件时补验。

学完本册，你应当能够独立完成这些事：为一个新项目做出「要不要用 React Native、用哪套初始化方案」的决策并说明理由；把一个多页面、带网络请求与本地缓存的应用从零搭起来；读懂双端原生模块的代码并自己动手封装设备能力；在性能事故中用正确的工具定位到帧率下降的真凶；最后，把应用签名上架，并建立崩溃监控与热修复的完整守护链。这就是「组件两端开花」的全部含义：种下同样的种子，收获两端的花果，并且知道每一朵花为什么开成那样。