跨平台开发框架：React Native、Flutter 快速上手

跨平台开发框架：React Native、Flutter 快速上手教程导读

一句话定位：用一套代码同时跑通 iOS 和 Android，本教程用"动手优先"的方式，带你从零搭建环境、跑起第一个应用，再深入 React Native 与 Flutter 的组件、状态、导航与工程实践，最后能独立做出自己的跨平台应用。

这个教程解决什么问题

移动开发圈子里一直有个老问题：同一个产品，要不要为 iOS 和 Android 各写一遍？原生开发体验最好，但两套团队、两套代码、两倍维护成本，小团队往往扛不住。于是 React Native 和 Flutter 这两大跨平台框架冒了出来，目标都是"写一次、两端跑"。可很多初学者卡在第一步：教程看了一堆，环境装不明白，项目起不来，代码敲下去报错一堆，也不知道这两个框架到底该选哪个。

本教程要解决的就是这件事。它不打算把两套框架的所有 API 都背给你听，而是换一条路：先把最小可运行的例子跑通，让你在模拟器上亲眼看到自己的第一屏画面，再回过头来拆解"为什么这么写"。从环境搭建、项目初始化，到组件、布局、状态管理、导航、网络请求、本地存储、原生能力调用和调试，每一节都对应一个能落地的知识点。

这套教材同时覆盖 React Native 与 Flutter，不是简单的并列堆叠。凡是两边都有的能力（组件、状态、导航、存储），都放在同一主题下对照着讲，让你看一节能明白另一家的同类问题怎么解。这样学完，你不只"会用一个框架"，而是具备迁移到另一家的能力。

适合谁读

• 零基础转行做移动开发的人：教程从装 Node、装 Android Studio 讲起，不假设你有移动端经验。
• 熟悉 Web 开发、想进入移动端的前端工程师：React Native 的 JSX 和 Flutter 的 Widget 都能和前端心智模型对上，教程里特意标注了两者与 Web 开发的异同。
• 已经在用其中一个框架、想对比学习另一个的开发者：每章的双框架对照会帮你快速建立迁移视角。
• 带团队做技术选型的工程师：第 1 章和第 5 章的状态管理方案对比，提供了决策所需的事实与代价分析。

学完你能做什么

1. 独立完成 React Native 与 Flutter 两套开发环境的安装、配置与故障排查。
2. 分别创建并运行第一个应用，看懂两个框架的项目结构各有什么用。
3. 用声明式 UI 的思维方式编写界面，会使用 View、Text、FlatList 与 Container、Row、ListView 等核心组件搭建页面。
4. 理解并实践组件内部状态、全局状态管理（Redux、Provider、Riverpod 等）与生命周期管理。
5. 实现页面导航、网络请求、本地数据存储、手势交互、原生能力调用等常用功能。
6. 掌握两套框架的调试工具链，能定位并解决运行中的常见问题。
7. 基于性能、生态、团队技能等维度，为实际项目做出合理的框架选型判断。

学习路线

这条路线有一条暗线：先解决"能不能跑"，再解决"怎么组织代码"，最后解决"完整功能怎么做"。跳着读可以，但第 2 章的环境是后面所有动手环节的地基，建议不要跳过。

怎么用这个教程

建议阅读顺序：从头到尾顺序读。第 1 章可以先快速浏览建立全局观，重点放在第 2 章开始的环境搭建——它决定了你后面能不能跟着动手。第 3 到 6 章是核心，建议每节都配合自己的小实验，敲完代码再读原理。

动手环境：Windows 或 macOS 都可以。Android 侧需要 Node.js、JDK 与 Android Studio；iOS 侧只支持 macOS，需要 Xcode 和 CocoaPods。如果你只有 Windows 又想体验 iOS，可以暂时只看 iOS 相关的概念讲解，用 Android 模拟器完成大部分练习。

每节节奏：每节正文约 20 到 30 分钟，先跑通示例，再回头读原理与坑位提示。节末的"要点回顾"是自检清单，能不看正文复述出来，这一节就算过。

预期耗时：全书约 34 篇内容。每天投入 2 小时左右，两周可以完成全部动手练习；如果只想要"跑通一个应用"的最低目标，读完第 1、2、3 章即可。

遇到报错怎么办：教程在每节的"常见坑"里收录了高发的报错与解法。如果没命中，先把报错关键词拆成英文搜官方文档和社区讨论，多数问题都有现成答案。工具链版本更新很快，教程里给的是稳定版本区间，遇到版本差异时以官方文档为准。

阅读辅助：每章支柱页有本章全景图与子章节导航，适合快速定位；各节的对比表格适合当作速查卡反复回看。教程刻意不做超链接，交叉引用一律用"详见第 X 章"的纯文字，方便在任何环境阅读。

两个需要先放下的误区。一是"跨平台就等于写 Web"。React Native 的组件确实是原生控件，但 JSX 写法与 HTML 有本质区别：没有 div 和 span，只有 View 和 Text；样式也不是 CSS，而是驼峰命名的 StyleSheet 对象。Flutter 更是彻底脱离 Web 模型，一切皆 Widget，连居中一个元素都要想清楚是 Row 还是 Column。二是"会一个框架就会另一个"。两者语法、渲染机制、状态管理思路差异很大，本教程按主题对照讲解，正是为了让你看到差异、而不是想当然迁移。

关于版本。React Native 社区迭代很快，从 0.x 时代一路过来，很多老教程里 react-native init 的命令已经过时，现在官方推荐用脚手架模板创建项目；Flutter 相对稳定，但 Dart 语言版本和若干 API 也在演进。教程中的命令基于较新的稳定版本，如果某条命令提示已废弃，优先看命令输出里的迁移提示，而不是回头怀疑自己装错了。