React Native搭建环境通俗解释：新手也能懂的配置流程-编程实验室

React Native环境搭建全攻略：从零开始，新手也能跑通第一个App

你是不是也曾经点开React Native官方文档，看到满屏的命令行、SDK路径、JDK版本要求时，瞬间感觉脑袋发大？别担心，这几乎是每个跨平台开发新手都会经历的“入门暴击”。

今天我们就来彻底拆解React Native环境搭建的全过程，不用术语堆砌，不甩复杂流程。就像朋友手把手教你一样，一步一步带你把项目跑起来。

为什么React Native要装这么多东西？

在动手之前，先搞清楚一件事：
我们用JavaScript写代码，但最终是要生成一个能在手机上运行的原生App。这就像是——你想做一顿饭，虽然你是主厨（写JS），但厨房里的锅碗瓢盆、煤气灶、冰箱（原生工具链）都得有人准备好。

所以，React Native看似只靠JS就能干活，其实背后有一整套“隐形基建”在支撑：

Node.js→ 让JS能运行在电脑上
JDK→ 编译Android底层代码需要Java环境
Android Studio + SDK→ 提供安卓构建工具和模拟器
CLI工具→ 帮你自动创建项目结构
Metro打包机→ 实时把你的JS变成手机能懂的语言

明白了这一点，你就不会觉得这些配置是“莫名其妙”的任务了。

第一步：让电脑认识JavaScript —— 安装 Node.js 和 npm

这玩意儿到底是干啥的？

简单说：
-Node.js是能让 JavaScript 在你电脑上运行的“引擎”
-npm是一个巨大的“乐高零件仓库”，你可以从中下载别人写好的功能模块

React Native 的所有命令行工具（比如创建项目、启动服务）都是基于 Node.js 写的，没它寸步难行。

怎么装？三步搞定

打开官网： https://nodejs.org
点击那个绿色的大按钮，下载LTS 版本（长期支持版）
- 推荐 v18 或 v20，太老或太新都不稳定
安装完成后打开终端（Mac/Linux）或命令提示符（Windows），输入：

node -v npm -v

如果输出类似v18.17.0和9.6.7，恭喜！Node 已就位。

✅ 小贴士：不要用 nvm 以外的方式随意切换 Node 版本，容易引发依赖冲突。新手建议固定一个 LTS 版本用到底。

第二步：给 Android 准备编译环境 —— JDK 到位

听起来很Java，关我JS什么事？

虽然你写的是 JS，但 React Native 最终会调用 Android 原生代码来渲染界面、访问摄像头等功能。而这些原生部分是用 Java/Kotlin 写的，所以必须有个“翻译官”来编译它们 —— 那就是 JDK。

要哪个版本？怎么选？

目前主流 React Native 项目推荐使用JDK 11。不是越新越好，也不是随便装个就行。

macOS 用户（M1/M2芯片居多）

推荐用 Homebrew 安装 OpenJDK：

brew install openjdk@11

然后设置环境变量（加到~/.zshrc文件里）：

export JAVA_HOME="/opt/homebrew/opt/openjdk@11/libexec/openjdk.jdk/Contents/Home" export PATH="$PATH:$JAVA_HOME/bin"

保存后执行：

source ~/.zshrc

验证一下：

java -version javac -version

看到11.x.x就说明成功了。

Windows 用户

去这个网站下载： https://adoptium.net
选择 Temurin JDK 11 → x64 Installer → 下载.msi安装包。

安装完记得设置两个系统变量：
-JAVA_HOME→ 比如C:\Program Files\Eclipse Adoptium\jdk-11.0.16.8-hotspot
- 把%JAVA_HOME%\bin加入PATH

Linux（Ubuntu为例）

一条命令解决：

sudo apt update && sudo apt install openjdk-11-jdk -y

再验证版本即可。

⚠️ 常见坑点：有些人装了最新 JDK 17 或 21，结果 Gradle 报错。记住一句话：React Native + Android 开发，请认准 JDK 11。

第三步：安卓开发全家桶 —— Android Studio 和 SDK

我不想写 Java，也要装 Android Studio？

是的，必须装。

哪怕你不打算打开它写一行代码，它提供的三大核心资源你也绕不开：
-SDK：开发安卓所需的API库
-ADB：连接真机调试的桥梁
-Emulator：没有手机也能测试App

而且很多命令（比如react-native run-android）本质上是在后台调用它的工具。

安装步骤详解

去官网下载 Android Studio
安装时选择Custom（自定义）模式
关键组件一定要勾上：
- Android SDK
- Android SDK Platform
- Performance (HAXM / Hypervisor)
- Android Virtual Device

安装过程中会让你选 SDK 存放路径，记下来！后面要用。

比如：
- Mac:/Users/你的用户名/Library/Android/sdk
- Windows:C:\Users\你的用户名\AppData\Local\Android\Sdk
- Linux:/home/你的用户名/Android/Sdk

设置关键环境变量

这是最容易出错的一环！很多人卡在“找不到SDK”就是因为漏了这步。

在终端中添加以下内容（以 macOS/Linux 为例，写入~/.zshrc）：

export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Windows 用户则通过：

控制面板 → 系统 → 高级系统设置 → 环境变量 → 新建用户变量

同样添加ANDROID_HOME和修改PATH。

改完重启终端，运行：

adb version

如果有版本号出来，说明 SDK 工具已经可用。

第四步：创建项目 —— CLI 还是 Expo？新手该怎么选？

现在轮到最关键的一步：初始化你的第一个项目。

React Native 有两种方式：

方式	适合人群	是否需要配环境	扩展性
React Native CLI	想深入学习、做企业项目	必须配全套环境	极强
Expo CLI	新手入门、快速原型	大部分自动处理	受限

如果你是纯新手，我强烈建议先从 Expo 入门

原因很简单：你可以跳过JDK、SDK这些配置，直接写出第一个App

试试这条命令：

npx create-react-native-app MyFirstApp --template cd MyFirstApp npx expo start

然后扫个码就能在手机上看效果！

等你熟悉了基本语法和开发节奏，再回头学 CLI 也不迟。

如果你想挑战完整流程（推荐进阶者）

那就用标准 CLI 创建项目：

npx react-native init HelloWorld cd HelloWorld

这时候你会发现多了两个文件夹：android/和ios/—— 这就是真正的原生工程目录。

运行安卓版：

npx react-native run-android

第一次会非常慢，因为它要：
- 下载 Gradle
- 下载各种依赖包
- 构建原生项目
- 安装APK到设备

耐心等待，只要最后出现 “Welcome to React Native” 页面，你就成功了！

第五步：跑起来了吗？常见问题急救指南

❌ 问题1：白屏 + “Unable to load JS bundle”

最常见错误之一。

原因：手机连不上电脑上的 Metro 服务器（默认走8081端口）

解决方案：
1. 确保手机和电脑在同一Wi-Fi下
2. 在App里摇一摇（模拟器按Cmd+D或Ctrl+M）→ 打开 Dev Menu
3. 选 “Dev Settings” → “Debug server host & port”
4. 输入你的电脑局域网IP + :8081，例如：192.168.31.100:8081
5. 回到首页双击R重载

💡 查看电脑IP的方法：
- Mac/Linux:ifconfig | grep "inet "
- Windows:ipconfig

❌ 问题2：Gradle sync failed，依赖下载失败

墙的问题。尤其是国内网络访问jcenter()或 Google Maven 很慢甚至失败。

解决办法：换成阿里云镜像

打开项目根目录下的android/build.gradle，找到repositories块，改成这样：

allprojects { repositories { maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'https://maven.aliyun.com/repository/public' } mavenCentral() } }

保存后重新运行npx react-native run-android，速度立竿见影。

❌ 问题3：No connected devices found

意思是找不到设备。

检查以下几点：
- 模拟器有没有启动？
- 真机是否打开了“开发者选项”和“USB调试”？
- ADB有没有识别到？

手动查看设备状态：

adb devices

如果列表为空：
- 重启ADB：adb kill-server && adb start-server
- 重新插拔数据线
- 换个USB接口或数据线（有些线只能充电）

开发体验优化小技巧

一旦跑通了第一个App，接下来可以提升效率：

✅ 使用 VS Code + 插件组合

ESLint：帮你避免低级语法错误
Prettier：自动格式化代码，保持整洁
React Native Tools：提供智能提示

✅ 开启热重载（Hot Reloading）

修改代码后无需重新编译整个App，几秒内看到变化。

在 Dev Menu 中开启：
- Hot Reloading
- Live Reloading（可选）

⚠️ 注意：某些改动仍需全量重载（如修改原生模块）

✅ 启用性能监控

在 Dev Menu 中打开 “Performance Monitor”，实时查看：
- FPS帧率
- 内存占用
- JS响应时间

有助于发现卡顿瓶颈。

结尾：你现在已经是React Native开发者了

回顾一下我们都做了什么：

装好了 Node.js，让JS能在本地跑起来
配置了 JDK，为Android编译铺平道路
安装了 Android Studio 和 SDK，拿到了全套开发工具
成功用 CLI 或 Expo 创建并运行了项目
解决了最常见的几个“拦路虎”

这一套流程走下来，你已经比大多数半途放弃的人走得更远了。

下一步做什么？

不妨试试：
- 修改App.js里的文字和颜色
- 添加一个按钮，点击弹出 Alert
- 用fetch()请求一个网络接口
- 把App装到自己手机上给朋友炫耀 😄

技术的成长从来不是一蹴而就，而是从“我能跑起来”开始的。
你现在，已经有了这个起点。

如果你在配置过程中遇到其他问题，欢迎留言交流。我们一起把这条路走得更顺。

React Native搭建环境通俗解释：新手也能懂的配置流程