React Native搭建环境通俗解释：初学者看懂两大方案

跨平台开发第一步：React Native环境搭建，新手如何选对路？

你是不是也曾在搜索“React Native 搭建环境”的时候，被一堆术语搞得晕头转向？JDK、Gradle、Xcode、Expo Go、Metro 打包器……一个个陌生名词接踵而来，仿佛还没开始写代码，就已经被配置流程劝退。

别急。这其实是每个 RN 新手都会经历的“入门阵痛”。好消息是——你现在看到的，不是又一篇复制粘贴命令行的教程，而是一次真正帮你理清思路的技术导航。

我们不只告诉你“怎么做”，更要讲清楚“为什么这么做”、“两种主流方案到底差在哪”、“我该选哪个才不踩坑”。

从零开始前，先搞明白一件事

React Native 的核心魅力在于：用 JavaScript 写代码，却能生成真正的原生应用。但这也带来一个现实问题——它既不是纯前端项目（像 Vue/React 那样npm run dev就能跑），也不是传统安卓或 iOS 开发（全靠 Java/Swift + Android Studio/Xcode）。

它站在中间，既要懂 JS，又要和原生系统打交道。因此，“搭建环境”本质上是在为这座跨语言桥梁打好地基。

目前主流路径只有两条：

1. 自己动手，丰衣足食→ React Native CLI
2. 借力平台，快速上车→ Expo

它们就像登山时的两种选择：一个是背上装备徒步攀岩，路线自由但辛苦；另一个是坐缆车上山，省力快捷但受限于轨道。

下面我们来一场“沉浸式拆解”，看看每条路究竟通向何方。

方案一：React Native CLI —— 原生世界的“完全掌控者”

它适合谁？

如果你的目标是做一个需要调用人脸识别、蓝牙打印、自定义支付 SDK 的企业级 App，或者你的团队里有原生开发工程师配合协作，那这条路几乎是必经之路。

CLI（Command Line Interface）是 React Native 官方最早提供的脚手架工具。你可以把它理解为“裸机版 RN”。它不做封装，直接给你一个包含完整 Android 和 iOS 工程的项目结构。

npx react-native init MyProject

就这么一条命令，背后会生成一个带android/和ios/文件夹的庞然大物。从此，你拥有了修改MainActivity.java或AppDelegate.m的权力——听起来很酷，但也意味着责任来了。

它是怎么工作的？

简单来说，React Native CLI 的运行机制可以概括为三步：

1. JS 层写逻辑：你在.js/.tsx文件中用 React 语法写界面和交互；
2. Metro 打包服务：启动后将 JS 代码编译成可执行模块；
3. Bridge 桥接通信：原生端通过 JS 引擎（如 Hermes）加载并运行这些逻辑，再把 UI 渲染成真正的原生组件。

🔍 这里的关键是“桥接”（Bridge）。它是 JS 线程与原生线程之间的信使，虽然未来会被 TurboModules 取代，但现在仍是核心架构之一。

优势在哪？

• ✅完全控制原生工程：想加个第三方 SDK？没问题，手动 link 就行。
• ✅性能优化空间大：可以启用 Hermes 引擎提升启动速度，压缩包体积。
• ✅适配复杂业务场景：金融、医疗、IoT 类 App 几乎都走这条路。

代价是什么？

太重了。

你需要提前安装一大堆东西：
- Node.js（运行 JS）
- JDK（安卓开发基础）
- Android Studio（提供 SDK 和模拟器）
- Gradle（构建工具）
- macOS 用户还得装 Xcode + CocoaPods

更头疼的是环境变量配置。很多人卡在第一步：“react-native run-android报错：adb not found”。原因往往是ANDROID_HOME没设对，或者 PATH 没包含平台工具路径。

而且一旦升级 RN 版本，经常要手动处理原生代码迁移，稍有不慎就“黄屏报错”。

🧱 总结一句话：灵活性极高，门槛也高。适合愿意深入底层、追求极致定制的人。

方案二：Expo —— 让初学者也能 30 分钟跑起来的“加速器”

它解决了什么痛点？

如果说 CLI 是让你从零造一辆车，那 Expo 就是直接给你一辆已经组装好的电动车，插上钥匙就能开。

Expo 不是一个新框架，而是围绕 React Native 构建的一套开发工具链 + 服务平台。它的目标非常明确：让开发者不用碰原生代码，也能快速做出功能完整的移动应用。

它是怎么做到的？

Expo 的秘密武器叫Universal Native Shell（通用原生壳）。

这个“壳”其实是一个预编译好的原生 App，内置了几十种常见功能：相机、定位、通知、文件系统、传感器等等。你写的 JS 代码运行在这个壳里面，通过标准 API 调用这些能力。

举个例子：你想访问用户位置，只需要这样写：

import * as Location from 'expo-location'; let { status } = await Location.requestForegroundPermissionsAsync(); if (status === 'granted') { let location = await Location.getCurrentPositionAsync({}); console.log(location.coords.latitude); }

没有一行原生代码，也没有任何配置文件改动。所有权限申请、原生调用都被封装成了 JS 接口。

怎么预览？打开手机上的Expo Go App，扫一下终端二维码，立刻就能看到效果。连模拟器都不用启动！

核心优势一览

特别是 EAS（Expo Application Services），彻底解放了非 macOS 用户发布 iOS 应用的难题——以前必须借一台 Mac mini，现在只要提交命令，云端自动帮你编译。

当然也有局限

天下没有免费的午餐。Expo 的最大限制是：不能随意引入任意原生库。

比如你要接入某个厂商的专有蓝牙协议库，而这个库没有对应的expo-plugin，那就只能选择 “eject” —— 也就是脱离 Expo 管控，生成原生目录，转为类似 CLI 的项目结构。

一旦 eject，你就失去了部分便利性，比如不能再用 Expo Go 实时预览，构建流程也会变复杂。

另外，因为 Expo 的壳包含了大量未使用的原生模块，最终打包出来的 APK/IPA 体积会比纯 CLI 项目大一些（通常多出 10~20MB），不适合对包大小极度敏感的应用。

🚶‍♂️ 总结一句话：上手快、开发快、交付快，但自由度打折扣。适合 MVP 验证、教学、独立开发者和个人项目。

一张表看懂两者本质区别

你会发现，这两者根本不是“谁替代谁”的关系，而是面向不同阶段、不同需求的开发者的合理分工。

我该怎么选？三个真实场景帮你决策

场景一：你是前端出身，想转型做移动端

→强烈推荐从 Expo 入门

理由很简单：你不需要立刻面对build.gradle语法错误或pod install失败的折磨。你可以先把精力放在理解“JS 如何驱动原生 UI”这件事上。

等你熟悉了 RN 的基本模式，再逐步了解原生原理也不迟。

场景二：你在创业公司，要做一个原型给投资人看

→闭眼选 Expo

7 天内上线一个带地图、拍照上传、推送提醒的 App？Expo 能帮你实现。扫码即看的功能演示，远比“等我本地跑起来给你看”更有说服力。

场景三：你在大型金融机构，要开发一款合规级 App

→必须用 CLI 或 eject 后的 Expo

涉及安全键盘、指纹登录、私有加密算法等功能，必须深度集成原生 SDK。这时候，Expo 的封装层反而成了障碍。

高阶玩法：能不能“先用 Expo，后转 CLI”？

当然可以！而且这是一种非常聪明的做法。

Expo 提供了一个叫prebuild的命令：

npx expo prebuild

它可以为你无损生成android/和ios/目录，相当于温和地“脱离托管”，业内称为 soft eject。你依然可以使用大部分 Expo 插件，同时获得了修改原生代码的能力。

这意味着你可以：
1. 用 Expo 快速搭建 MVP；
2. 功能验证成功后，生成原生工程；
3. 逐步接入私有 SDK，最终独立发布。

这种“渐进式演进”策略，既保证了前期效率，又不失后期扩展性，是很多成熟团队的实际做法。

最后几个实用建议，帮你少走弯路

1. Node 版本别乱选
   无论是 CLI 还是 Expo，建议使用Node.js 18 LTS（当前最稳定）。避免用最新版，某些依赖可能不兼容。

2. 缓存问题别忽视
   遇到莫名其妙的白屏或模块找不到？试试清缓存：
   ```bash
   # CLI 项目
   npx react-native start –reset-cache

# Expo 项目
npx expo start -c
```

3. 不要迷信“最新版本”
   Expo SDK 每年更新一次，建议跟随官方节奏升级，不要跳版本。RN CLI 更要注意 Breaking Changes，尤其是 0.68 升 0.72 这类大版本。

4. 尽早开启 Hermes
   Hermes 是 Facebook 推出的轻量级 JS 引擎，能显著提升启动速度和内存占用。Expo 默认已启用，CLI 项目需要手动开启：
   gradle // android/app/build.gradle project.ext.react = [ enableHermes: true ]

5. 善用 DevTools
   - CLI 推荐使用Flipper查看日志、网络请求、状态树；
   - Expo 可用浏览器开发者工具调试（Cmd+D → Debug）

写在最后：技术选型的本质，是权衡

React Native 的环境搭建之所以让人困惑，不是因为它难，而是因为选择太多，却没有标准答案。

CLI 给你自由，Expo 给你效率。没有哪一个是“最好”的，只有哪一个“最适合当下”。

所以，我的建议是：

如果你是新手，先从 Expo 开始。把它当作你的“RN 学习沙盒”。等你真正理解了桥接机制、原生通信、生命周期之后，再回头去看 CLI，你会发现自己已经不再是那个被adb折磨的新手了。

当你有一天能根据项目需求，在 Expo 和 CLI 之间自如切换时，恭喜你——你已经真正掌握了 React Native 的精髓。

而现在，你只需要迈出第一步：
打开终端，输入：

npm install -g @expo/cli npx create-expo-app HelloWorld cd HelloWorld npx expo start

然后拿起手机，打开 Expo Go，扫一扫。

看到屏幕上跳出“Welcome to Expo!”的那一刻，你就已经赢了。