第2章开发环境搭建

2、开发环境搭建：安装Node.js、配置React Native/Flutter环境、安装Android Studio与Xcode、创建第一个Hello World项目

说实话，环境搭建是很多新手放弃的第一步。我见过太多人卡在安装环节，一整天过去了，连个Hello World都没跑起来。别急，跟着我来，一步步搞定。

不管你是选React Native还是Flutter，Node.js都是绕不开的。为什么？因为很多工具链都依赖它。我个人习惯用nvm来管理Node版本，这样切换项目时特别方便。

核心要点：Node.js版本建议选LTS（长期支持版），别追新。我在项目中遇到过因为Node版本太高导致某些包不兼容的情况，折腾了半天。

安装步骤很简单：

嗯，这里要注意：Windows用户记得勾选"Add to PATH"，不然命令行找不到node命令。

如果你选React Native，那接下来要装个脚手架工具。我个人推荐用 npx react-native init 而不是全局安装。为什么？因为每个项目的版本可能不一样，全局安装容易出问题。

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-android

你想想看，这条命令背后做了多少事？它帮你创建了项目结构、下载了依赖、配置了原生代码。我第一次跑这个命令时，等了快10分钟，还以为电脑死机了。

小技巧：如果下载速度慢，可以配置淘宝镜像。在项目根目录创建 .npmrc 文件，写上 registry=https://registry.npmmirror.com。

Flutter的安装相对简单。去官网下载SDK，解压到你想放的目录。然后配置环境变量。我习惯把Flutter放在 C:\dev 或 /Users/你的名字/dev 下。

配置完环境变量后，运行 flutter doctor 检查环境。这个命令会告诉你缺什么。我第一次跑的时候，它提示我缺Android Studio和Xcode，嗯，那就接着装呗。

flutter create my_first_flutter_app
cd my_first_flutter_app
flutter run

避坑指南：我曾经因为Flutter版本和Dart版本不匹配，编译报错了一整天。后来发现是忘了运行 flutter upgrade。所以，每次开始新项目前，先更新一下Flutter。

Android Studio是必须的，不管你是做React Native还是Flutter。它提供了模拟器和Android SDK。安装过程比较长，但别急。

安装步骤：

说实话，Android Studio第一次启动特别慢，因为它要下载很多组件。我建议你泡杯咖啡，或者去干点别的。

重要提醒：记得配置ANDROID_HOME环境变量。路径一般是 C:\Users\你的名字\AppData\Local\Android\Sdk（Windows）或 ~/Library/Android/sdk（Mac）。

如果你用Mac做iOS开发，Xcode是逃不掉的。去App Store下载，大概8个G。下载完还要安装Command Line Tools，在终端里运行：

xcode-select --install

我第一次装Xcode时，下载了一整夜。第二天发现版本不对，又重装了一次。所以，建议你提前规划好时间。

小技巧：Xcode安装完后，记得打开一次，同意协议。不然命令行工具用不了。我有个同事就是忘了这步，折腾了半天。

好了，环境都搭好了。我们来创建第一个项目。以React Native为例：

npx react-native init HelloWorld
cd HelloWorld
npx react-native run-android

如果是Flutter：

flutter create hello_world
cd hello_world
flutter run

看到模拟器上出现"Hello World"了吗？嗯，那一刻的感觉，怎么说呢，就像你第一次点亮了灯泡。我记得我第一次跑通时，激动得截图发朋友圈了。

常见问题：如果模拟器启动不了，检查一下是否开启了硬件加速。Windows用户需要在BIOS里开启VT-x。我曾经因为这个卡了一下午。

最后，给你一个检查清单，确保所有环境都配好了：

全部通过？恭喜你，环境搭建完成了。接下来，我们就可以真正开始写代码了。说实话，环境搭建是最枯燥的部分，但也是最关键的。打好基础，后面的路才会顺畅。