刘家宁
搜索

React Native 开发环境搭建

在 Windows 上搭建 React Native Android 开发环境的完整步骤。

移动开发6 MIN READ

Node.js 安装页面

前言

总的来说，React Native 的开发流程分为 4 步：

  1. 安装依赖：Node 和 JDK。
  2. 配置 Android 开发环境：安装 Android Studio、Android SDK 并配置环境变量。
  3. 准备一台 Android 真机或模拟器。
  4. 创建项目。

安装依赖

注意 配置环境时，所有路径都不要有中文和中文字符，包括开发项目的路径也不要出现中文

需要安装的依赖有：Node、JDK。

Node安装

Node.js下载

注意 Node 的版本应大于等于 20.19.4

安装步骤

1、双击下载后的安装包，如下所示：

2、点击以上的 Next 按钮，将出现如下界面：

3、勾选接受协议选项，点击 Next 按钮 :

4、Node.js默认安装目录为 “C:\Program Files\nodejs" , 你可以修改目录，并点击 Next 按钮：

5、点击 Install（安装） 开始安装 Node.js，你也可以点击 Back（返回）来修改先前的配置：

点击 Finish（完成）按钮退出安装向导。

安装完成后，我们可以在命令行或 Windows Powershell 中执行以下命令来测试：

node -v

如果你获得以上输出结果，说明你已经成功安装了Node.js。

JDK安装

React Native 需要 Java Development Kit [JDK] 17。

JDK17下载

安装步骤

安装完成后，我们可以在命令行或 Windows Powershell 中执行以下命令来测试：

javac -version

如果你获得以上输出结果，说明你已经成功安装了JDK17。

如果没有输出，可能是环境变量没有配置

以Windows11为例配置环境变量，Windows10有路径有些许不同，请自行百度

此电脑—>查找设置—>环境变量

配置Android 开发环境

注意 请注意！！！国内用户必须必须必须有稳定的代理软件，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些代理软件可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。如果报错中出现有网址，是因为链接源仓库的网络链接被阻断了，这一阻断现象可能因时间、地区、运营商而不同。

注意 如果没有，使用以下替代方案（未实践，不保证成功）

hosts 文件配置（加速 Google/Gradle 依赖下载）

文件位置：

C:\Windows\System32\drivers\etc\hosts

添加内容：

Google 下载服务加速

180.163.151.161 dl.google.com 180.163.151.161 dl.l.google.com 180.163.151.161 dl-ssl.google.com

Gradle 服务加速

104.16.73.101 services.gradle.org

如安装超时，请用 chinaz测速 检查 IP 可用性，并替换为可访问的 IP。

安装 Android Studio

Android Studio下载地址

一路Next，最后Install。如果C盘位置不够，放在D盘也可以的。这个东西几十个G，注意留好空间。

安装SDK

在 SDK Manager 中选择“SDK Platforms”选项卡，然后在右下角勾选“Show Package Details”。展开Android 15 (VanillaIceCream)选项，确保勾选了下面这些组件（如果你看不到这个界面，则需要使用稳定的代理软件）：

  • Android SDK Platform 35
  • Intel x86 Atom_64 System Image

然后点击“SDK Tools”选项卡，同样勾中右下角的“Show Package Details”。展开“Android SDK Build-Tools”选项，确保选中了 React Native 所必须的35.0.0版本。你可以同时安装多个其他版本。

（以上版本可能会随React Native版本变动，请根据项目所用版本进行调整）

环境配置

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

此电脑—>查找设置—>环境变量，打开环境变量

  • 新增 ANDROID_HOME，指向 SDK 安装目录（如 C:\Users\用户名\AppData\Local\Android\Sdk）
  • 新增 ANDROID_SDK_ROOT，指向 SDK 安装目录（如 C:\Users\用户名\AppData\Local\Android\Sdk）

  • 将 %ANDROID_HOME%\platform-tools、%ANDROID_HOME%\emulator、%ANDROID_HOME%\tools、%ANDROID_HOME%\tools\bin 添加到 Path

配置完成后，打开cmd输入

adb --version

检验是否完成配置

Android 设备准备（使用MuMu模拟器）

MuMu模拟器下载 下载完成后打开，新建一个设备，在启动项目时打开该设备

创建并启动一个项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：

npm uninstall -g react-native-cli @react-native-community/cli

注意 注意事项一：请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。

注意事项二：请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

注意事项三：请不要使用一些移植的终端环境，例如git bash或mingw等等，这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行（CMD 或 powershell）运行。

使用 React Native 内建的命令行工具来创建一个名为“demo”的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用：

可以使用--version参数创建指定版本的项目。注意版本号必须精确到两个小数点。

npx react-native init demo
# 进入项目目录
cd demo
npm install
# 连接安卓模拟器（确保已打开一个MuMu设备）
adb connect 127.0.0.1:7555
# 运行 Android 应用
npm run android