第 2 章 开发环境搭建与项目初始化

第 2 章 · 开发环境搭建与项目初始化

章节摘要：本章解决"怎么让代码跑起来"这个最现实的问题。先分别搭起 React Native 与 Flutter 两套基础环境（Node、包管理器、Flutter SDK），再配置 IDE 与 Android/iOS 平台环境，最后各自创建并运行第一个项目。读完本章，你会在模拟器上亲眼看到自己写的第一个应用跑起来——这是全书所有动手环节的地基，也是后面每一章代码实验的前提条件。

学习目标

阅读完本章，你应当能够：

1. 独立完成 React Native 与 Flutter 的基础工具链安装与验证，并能在报错时定位到具体环节。
2. 配置 VS Code 与 Android Studio 两套 IDE 及对应插件。
3. 配置 JDK、Android SDK 与模拟器，并用 flutter doctor 自检环境。
4. 分别创建并运行 React Native 与 Flutter 的第一个项目，理解两者项目结构的差异。

核心概念速览

一句话点题：环境搭建不是"装完就完"，而是"装完能自检、报错能修"。本章教的不仅是安装步骤，更是排错思路。

子章节导航

2.1 基础开发环境准备

装 Node.js、npm、yarn 与 Flutter SDK 两套工具链。重点讲包管理器混用的危害、Flutter SDK 的解压路径选择与 PATH 配置，以及用 node -v、flutter doctor 等命令做环境自检。这节是整套环境的地基——地基偏一寸，上面的房子就跟着歪。

具体到实操：Node.js 推荐安装 LTS（长期支持）版本，用 node -v 和 npm -v 验证是否装好；yarn 通过 npm install -g yarn 全局安装。Flutter SDK 则是一整个压缩包，解压后把 bin 目录加进 PATH。特别注意不要装到需要管理员权限的目录——后面你会为这个决定省下很多权限报错的烦恼。装完 Flutter SDK 后第一件事就是跑 flutter doctor，它会像体检报告一样列出还缺哪些组件。

2.2 IDE 配置与推荐

在 VS Code 与 Android Studio 之间做选择。VS Code 靠插件支撑两个框架的开发，Android Studio 则是 Android 构建与模拟器的中枢。本节给出两套 IDE 的推荐插件清单与适用人群。

先说结论：主力编辑器二选一，但 Android Studio 基本绕不开。VS Code 轻量、启动快、插件生态好，React Native 的调试与 Flutter 的热重载都支持得很成熟；Android Studio 虽然重，但它自带 Android SDK、模拟器管理（AVD Manager）和完整的构建工具，Android 端开发离不开它。务实做法是：用 VS Code 写代码，用 Android Studio 管模拟器与构建，两者各司其职。

2.3 Android 开发环境配置

补齐 JDK 与 Android SDK，配置 ANDROID_HOME 环境变量，用 AVD Manager 创建模拟器。这是 Windows 用户跑通 Android 的关键一站。

JDK 是 Android 构建的前提，React Native 与 Flutter 都要求 OpenJDK 11 或更高版本。装完记得把 JAVA_HOME 与 %JAVA_HOME%\bin 加进环境变量，再用 java -version 验证。Android SDK 则通常随 Android Studio 一起安装，通过 SDK Manager 勾选 Platform、Build-Tools、Platform-Tools 等组件，最后把 ANDROID_HOME 与 emulator、platform-tools 目录加进 PATH。模拟器在 AVD Manager 里创建，选一个设备定义和系统镜像即可。

2.4 iOS 开发环境配置

只在 macOS 上适用。装 Xcode、配置命令行工具与 CocoaPods，管理 iOS 模拟器。Windows 用户可以先看概念，后续在 macOS 或云端环境实践。

iOS 侧的三件套是 Xcode、命令行工具和 CocoaPods。Xcode 从 Mac App Store 安装，之后用 xcode-select --install 补命令行工具；CocoaPods 是 Flutter 的 iOS 依赖管理工具，通过 gem 安装。iOS 模拟器直接由 Xcode 管理。Windows 用户读这节时重点理解"iOS 构建为什么只在 macOS 上可行"——这是苹果的开发工具链决定的，与框架本身无关。

2.5 React Native 项目创建与运行

用脚手架创建第一个 React Native 项目，认识 index.js、App.js、android、ios 等目录，把项目跑到模拟器上，并解读首次运行常见报错。

创建项目用脚手架工具，一条命令生成整个工程骨架。跑起来的方式因平台而异：Android 用运行脚本加参数，iOS 同理。首次运行要下载 Gradle 依赖或编译原生工程，耗时较长，耐心等待是常态。报错集中在环境缺失、依赖下载失败、端口占用这几类，本节会给出排查顺序。

2.6 Flutter 项目创建与运行

用 flutter create 创建第一个 Flutter 项目，认识 lib/main.dart、pubspec.yaml 等核心文件，跑起计数器应用，体验热重载的秒级反馈。

flutter create 一键生成工程，lib/main.dart 是入口，pubspec.yaml 管依赖。flutter run 直接跑起应用，运行中按 r 热重载、按 R 热重启，几秒内看到修改生效——这是 Flutter 开发体验最直观的时刻。首次运行会下载 Dart SDK 依赖与编译引擎，耗时偏长属正常现象。

子章节之间的逻辑关系

顺序是一路递进的：先备好两套"基础工具链"（2.1），接着配好"编辑器"（2.2），再补齐"平台环境"（2.3、2.4），最后才轮到"创建项目"（2.5、2.6）。跳过任何一环，跑到最后一步就会卡住——比如没装 JDK，创建的项目编译必然失败。

这套顺序其实暗合一条现实经验：环境问题的排查永远是从下往上走的。项目起不来时，先怀疑基础工具链（版本对不对、PATH 通不通），再怀疑平台环境（SDK 缺不缺、模拟器在不在），最后才怀疑项目本身。把本章的递进关系记住，等于提前拿到了一张排错地图。等你在 2.5、2.6 亲手撞上几个报错再回头修环境，体会会比直接读完深得多。

2.1 基础工具链 ──► 2.2 IDE ──► 2.3 Android 环境
                                   │
                                   └─► 2.4 iOS 环境（macOS）
                                          │
  2.5 RN 项目创建  ◄── 2.6 Flutter 项目创建
​

前置知识与后续延伸

• 前置知识：会使用操作系统终端、能配置系统环境变量；第 1 章的选型结论决定了你先搭哪套环境。对包管理器（npm/yarn）有基本认知会更快。
• 后续延伸：本章创建的工程是第 3 章到第 6 章所有代码的载体。环境问题会持续纠缠整个学习过程——如果这里排错经验不足，后面每章的"跑不起来"都会耗掉大量时间。建议把本章的报错清单收藏，随时回查。