🚀 从零开始，手把手教你搭建一个 React Native 开发环境（附避坑指南）
大家好，今天我们要来一场“React Native 的初体验之旅”——从零开始，搭建一个完整的 React Native 开发环境。
你是不是也曾经被 React Native 的“一次编写，多端运行”所吸引？但一打开文档，发现各种工具链、SDK、CLI 工具扑面而来，瞬间头大如斗？🤯
别慌！今天这篇文，就是为 零基础小白 和 半路转 RN 的前端人 准备的保姆级教程。我会像讲故事一样，带你一步步走过每一个环节，避开那些年我踩过的坑，让你在 1 小时内，跑起第一个 React Native 项目！
🧭 第一步：我们到底要做什么？
我们的目标是：
✅ 安装开发环境
✅ 创建一个 React Native 项目
✅ 在安卓模拟器上运行它
✅ 成功看到 “Hello World” 出现在手机屏幕上！
听起来是不是很酷？😎
🛠️ 第二步：环境准备——工欲善其事，必先利其器
1. 安装 Android Studio（安卓开发的“宇宙中心”）
首先，我们需要一个“安卓手机”来运行我们的 App。但总不能天天拿着真机调试吧？所以我们用 Android Studio 自带的模拟器 来代替。
👉 官方下载地址：developer.android.com/studio
安装过程很简单，一路“下一步”即可。重点是：记得勾选 Android SDK、Android SDK Platform、Android Virtual Device（AVD）。
💡 小贴士：安装路径尽量不要有中文或空格，避免后期出问题。
2. 启动 AVD Manager，创建你的“虚拟手机”
安装完 Android Studio 后，打开它，然后点击菜单栏的：
Tools → AVD Manager
点击 “Create Virtual Device”，选择一个你喜欢的设备型号（比如 Pixel 4），然后选择一个系统镜像（建议选择带 Google Play 的 API 30+ 版本）。
创建完成后，点击绿色的播放按钮 ▶️ 启动模拟器。
等待几分钟，你的“安卓手机”就启动成功了！🎉
🔧 第三步：配置环境变量——让电脑“认识”安卓工具
为了让命令行能调用 adb 等工具，我们需要把 Android SDK 的 platform-tools 加入系统环境变量。
✅ 找到你的 SDK 路径
🖼️
默认路径通常是：
C:\Users\你的用户名\AppData\Local\Android\Sdk
我的路径是：
C:\Users\hh\AppData\Local\Android\Sdk
✅ 添加到 PATH
- 右键“此电脑” → “属性” → “高级系统设置” → “环境变量”
- 在“系统变量”中找到
Path，点击“编辑” - 新增一条： C:\Users\hh\AppData\Local\Android\Sdk\platform-tools
保存后，打开一个新的终端（CMD 或 PowerShell），输入：
adb devices
如果看到类似下面的输出，恭喜你，环境变量配置成功！
List of devices attached
emulator-5554 device
📦 第四步：安装 Expo CLI——React Native 的“快捷启动器”
React Native 原生开发配置复杂？别怕，我们用 Expo 来简化一切！
Expo 是一个基于 React Native 的开发框架，它封装了复杂的原生配置，让我们可以快速启动项目。
1. 全局安装 Expo CLI
npm install -g expo-cli
💡 建议使用
pnpm或yarn，更快更省磁盘。如果你还没装 pnpm，先执行：npm install -g pnpm
2. 验证安装
expo version
如果输出版本号，说明安装成功！✅
🎮 第五步：在模拟器上安装 Expo Go（运行 App 的“容器”）
Expo 项目不能直接在模拟器上运行原生 APK，我们需要先安装 Expo Go 应用。
方法一：直接下载 APK 安装（推荐）
- 在电脑上下载
Expo-App.apk（可以从 Expo 官网或第三方可信源获取） - 打开终端，确保模拟器已启动
- 执行安装命令：
adb install Expo-App.apk
🖼️
确保安装的是以.apk结尾的
安装成功后，你应该能在模拟器的应用列表中看到 Expo Go 的图标！
🚀 第六步：创建你的第一个 React Native 项目！
万事俱备，只欠东风！现在，我们来创建项目。
1. 初始化项目
expo init todos
会弹出选择模板的界面，建议选择：
✔ blank – a minimal app as clean as an empty canvas
然后进入项目目录：
cd todos/
2. 安装依赖（使用 pnpm）
pnpm i
💡 为什么用 pnpm？更快、更省空间、依赖管理更清晰！强烈推荐！
▶️ 第七步：启动项目，见证奇迹的时刻！
执行启动命令：
pnpm run start
会打开一个 Metro Bundler 的终端窗口，并弹出一个二维码。
如何在模拟器中打开？
- 打开模拟器中的 Expo Go 应用
- 点击左上角的 “Scan QR Code”
- 使用 Expo Go 内置的扫码功能，扫描终端或浏览器中显示的二维码
稍等几秒，你的 App 就会在模拟器中加载成功！
🖼️ 【插入图片位置】
图：第一个 React Native 项目在模拟器中成功运行！
🎉 恭喜你！你已经成功跑通了第一个 React Native 项目！
🛑 常见问题 & 避坑指南
❌ 问题1：adb devices 没有列出设备
- 检查模拟器是否已启动
- 检查 USB 调试是否开启（Expo 模拟器默认开启）
- 重启 ADB 服务：
adb kill-server adb start-server
❌ 问题2：Expo Go 扫码后白屏或报错
- 检查电脑和模拟器是否在同一网络（Expo 通过局域网连接）
- 尝试在 Expo CLI 中按
a键直接在安卓设备运行 - 清除 Expo Go 缓存（应用设置中）
❌ 问题3：expo init 报错或卡住
- 检查网络，建议开启代理（国内用户）
- 尝试使用
npx create-react-native-app替代
🌟 总结：我们走了多远？
回顾一下，我们完成了：
- ✅ 安装 Android Studio 和模拟器
- ✅ 配置 Android SDK 环境变量
- ✅ 安装 Expo CLI
- ✅ 在模拟器安装 Expo Go
- ✅ 创建并运行第一个 React Native 项目
整个过程虽然有点繁琐，但每一步都至关重要。你现在拥有了一个完整的 React Native 开发环境，接下来就可以开始学习组件、状态管理、导航等高级内容了！
🔮 下一步：你想做什么？
- 想做一个 Todo List？我们刚刚创建的项目就叫
todos😉 - 想接入原生功能？Expo 也支持 EAS Build 和自定义原生模块
- 想发布到应用商店？Expo 可以帮你一键打包
📣 最后的话
React Native 并不可怕，可怕的是“不知道从哪开始”。希望这篇文能成为你 RN 之旅的起点。
代码不会骗人，但环境会。
—— 某个被 adb 折磨过的前端人
如果你觉得这篇文对你有帮助，别忘了点赞 ❤️、收藏 📌、转发 🔄！
也欢迎在评论区留下你的问题或心得，我们一起成长！
