返回

React Native Windows环境搭建：从入门到专业

前端

在 Windows 系统上配置 React Native 开发环境：终极指南

想要在 Windows 系统上踏上 React Native 开发之旅？本教程将引导您完成从头到尾的详细步骤，从设置必要的工具到运行您的第一个项目。

1. 安装必要的工具

Node.js

  • 前往 Node.js 官网下载并安装适用于 Windows 的最新版本。
  • 勾选“Add to PATH”选项，以便在命令行中访问 Node.js 命令。

Yarn

  • 打开命令提示符或 Windows PowerShell。
  • 输入以下命令安装 Yarn：
npm install -g yarn

Python 3

  • 前往 Python 官网下载并安装适用于 Windows 的最新版本 Python 3。
  • 勾选“Add Python 3.x to PATH”选项，以便在命令行中访问 Python 命令。

Android Studio

  • 前往 Android Studio 官网下载并安装适用于 Windows 的最新版本 Android Studio。
  • 在安装过程中，选择“Custom”安装，并勾选“Android SDK”和“Android SDK Platform-Tools”选项。

Java Development Kit (JDK)

  • 前往 Oracle 官网下载并安装适用于 Windows 的最新版本 Java Development Kit (JDK)。
  • 勾选“Add to PATH”选项，以便在命令行中访问 Java 命令。

Visual Studio Code (VSCode)

  • 前往 Visual Studio Code 官网下载并安装适用于 Windows 的最新版本 Visual Studio Code。
  • 勾选“Add to PATH”选项，以便在命令行中访问 code 命令。

2. 配置环境变量

JAVA_HOME

  • 右键单击“我的电脑”，选择“属性”>“高级系统设置”>“环境变量”。
  • 在“系统变量”列表中，创建新变量：“变量名”为 JAVA_HOME，“变量值”为 Java 安装目录的路径，例如：C:\Program Files\Java\jdk1.8.0_271。

ANDROID_HOME

  • 在“系统变量”列表中，创建新变量：“变量名”为 ANDROID_HOME，“变量值”为 Android SDK 安装目录的路径，例如：C:\Users\username\AppData\Local\Android\sdk。

PATH

  • 在“系统变量”列表中，找到“Path”变量，并编辑“变量值”，在末尾添加：
;%JAVA_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

3. 安装 React Native CLI

  • 打开命令提示符或 Windows PowerShell。
  • 输入以下命令安装 React Native CLI：
npm install -g react-native-cli

4. 创建 React Native 项目

  • 打开命令提示符或 Windows PowerShell。
  • 导航到您要创建项目的目录。
  • 输入以下命令创建新项目：
react-native init MyProject

5. 启动模拟器

  • 打开 Android Studio。
  • 点击工具栏中的“AVD Manager”图标。
  • 创建一个新的虚拟设备（AVD）。
  • 选择您要模拟的设备类型和 Android 版本。
  • 安装系统映像。
  • 为设备命名并设置存储空间。
  • 等待模拟器启动。

6. 运行项目

  • 导航到 React Native 项目目录。
  • 输入以下命令运行项目：
react-native run-android
  • 您的项目将自动部署到模拟器中。

7. 常见问题

运行项目时出现“Failed to install the app”错误

  • 确保 Android Studio、JDK 和 Android SDK 环境变量正确配置。
  • 检查设备的 USB 驱动程序是否已安装。
  • 尝试重新启动 Android Studio 和模拟器。

运行项目时出现“Error: Could not find com.android.tools.build:gradle:3.6.3”错误

  • 确保已安装 Android Studio 4.0 或更高版本。
  • 确保已安装最新的 Android SDK Platform-Tools。
  • 尝试重新启动 Android Studio 和模拟器。

运行项目时出现“adb.exe not found”错误

  • 确保已将 Android SDK Platform-Tools 添加到系统 PATH 环境变量中。
  • 尝试重新启动 Android Studio 和模拟器。

结语

恭喜您完成在 Windows 系统上设置 React Native 开发环境！现在，您可以开始构建您的第一个应用程序，并踏上令人兴奋的移动开发之旅。

常见问题解答

  1. 如何更新 React Native 版本？

    • 运行以下命令：npm install -g react-native-cli@latest

  2. 在哪里可以找到有关 React Native 的更多帮助？

  3. 如何调试 React Native 项目？

    • 使用 Chrome 开发者工具或 React Native Debugger。

  4. 我可以使用 Windows 子系统 for Linux (WSL) 来开发 React Native 吗？

    • 可以，但可能需要进行一些额外的配置。

  5. React Native 应用程序可以跨平台运行吗？

    • 是的，React Native 应用程序可以在 iOS 和 Android 平台上运行。