news 2026/4/11 16:56:11

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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 写的，没它寸步难行。

怎么装？三步搞定

  1. 打开官网： https://nodejs.org
  2. 点击那个绿色的大按钮，下载LTS 版本（长期支持版）
    - 推荐 v18 或 v20，太老或太新都不稳定
  3. 安装完成后打开终端（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）本质上是在后台调用它的工具。

安装步骤详解

  1. 去官网下载 Android Studio
  2. 安装时选择Custom（自定义）模式
  3. 关键组件一定要勾上：
    - 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开发者了

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

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

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

下一步做什么？

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

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

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

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/10 20:43:39

更换参考音频策略：当当前音色不满意时的应对方案

更换参考音频策略：当当前音色不满意时的应对方案 在虚拟主播直播带货、有声书自动生成、智能客服语音交互等场景中，用户对合成语音“像不像”“自然不自然”的要求越来越高。尤其是在使用 GLM-TTS 这类基于大模型的零样本语音克隆系统时，一段…

作者头像 李华
网站建设 2026/3/29 14:10:25

有声书自动化生产：结合大模型写作与GLM-TTS语音输出

有声书自动化生产：结合大模型写作与GLM-TTS语音输出 在内容消费加速向“听觉化”迁移的今天，喜马拉雅、Audible 和各类知识付费平台上的有声书需求持续攀升。然而，传统制作模式仍严重依赖专业配音演员——成本高、周期长、难以规模化。一位资…

作者头像 李华
网站建设 2026/4/6 8:13:58

工业协议解析入门：结合qserialport通俗解释

工业协议解析实战：用 QSerialPort 玩转 Modbus RTU你有没有遇到过这样的场景？设备连上了，串口也打开了，QSerialPort能收到一串串十六进制数据，但看着01 03 00 00 00 0A C4 0B这样的字节流，却不知道哪是地址…

作者头像 李华
网站建设 2026/4/9 22:36:40

使用量统计面板：可视化展示GPU算力与token消耗趋势

使用量统计面板：可视化展示GPU算力与token消耗趋势 在AI推理服务大规模落地的今天，一个看似不起眼却至关重要的问题浮出水面：我们如何真正“看见”模型运行时的资源消耗？尤其是在像GLM-TTS这样高保真、零样本语音合成系统中&#…

作者头像 李华
网站建设 2026/4/6 2:28:10

V2EX论坛发帖：与极客用户交流获取产品改进建议

与极客用户深度对话：从V2EX社区反馈看GLM-TTS的演进方向 在生成式AI浪潮席卷各行各业的今天，语音合成早已不再是“能出声就行”的初级阶段。越来越多开发者不再满足于千篇一律的机械朗读，而是追求“像人一样说话”——有温度、有个性、可定制…

作者头像 李华
网站建设 2026/4/8 20:20:17

Vivado 2019.2环境变量设置操作指南

Vivado 2019.2环境变量配置实战：从Windows到Linux的无缝部署你是否曾在安装完Vivado 2019.2后，满怀期待地打开终端输入vivado，却只看到一句冰冷的“command not found”或“不是内部或外部命令”？又或者，在运行Tcl脚本…

作者头像 李华