安装 Expo CLI / React Native CLI

Windows 系统环境搭建第三步

在配置好 Android Studio 和模拟器之后，我们需要安装 Expo CLI 和 React Native CLI，这是创建和管理 React Native 项目的核心工具。

1. 安装 Expo CLI

Expo CLI 是 Expo 官方提供的命令行工具，用于创建和管理 Expo 项目。

安装步骤

1. 打开命令提示符（CMD）或 PowerShell

   • 以管理员身份运行

2. 安装 Expo CLI

   • 运行以下命令：

     npm install -g expo-cli

   • 等待安装完成

3. 验证安装

   • 运行以下命令：

     expo --version

   • 看到版本号输出，表示安装成功

2. 安装 React Native CLI

React Native CLI 是 React Native 官方提供的命令行工具，用于创建和管理纯原生 React Native 项目。

安装步骤

1. 打开命令提示符（CMD）或 PowerShell

   • 以管理员身份运行

2. 安装 React Native CLI

   • 运行以下命令：

     npm install -g react-native-cli

   • 等待安装完成

3. 验证安装

   • 运行以下命令：

     react-native --version

   • 看到版本号输出，表示安装成功

3. 安装 Watchman（可选）

Watchman 是 Facebook 开发的文件监视器，用于提高 React Native 的开发效率。虽然在 Windows 上不是必需的，但安装它可以提高开发体验。

安装步骤

1. 下载 Watchman

   • 访问 Watchman 官方 GitHub 页面
   • 下载最新的 Windows 版本（.zip 文件）

2. 解压并配置

   • 解压下载的 zip 文件
   • 将解压后的文件夹添加到系统环境变量 Path 中

3. 验证安装

   • 打开命令提示符（CMD）或 PowerShell
   • 运行以下命令：

     watchman --version

   • 看到版本号输出，表示安装成功

4. 配置 npm 镜像（推荐）

由于网络原因，npm 官方镜像可能下载速度较慢，建议配置国内镜像以提高下载速度。

配置步骤

1. 设置 npm 镜像

   • 运行以下命令：

     npm config set registry https://registry.npmmirror.com/

2. 设置 yarn 镜像（如果使用 yarn）

   • 运行以下命令：

     yarn config set registry https://registry.npmmirror.com/

3. 验证配置

   • 运行以下命令：

     npm config get registry

   • 看到输出 https://registry.npmmirror.com/，表示配置成功

5. 常见问题解决

Expo CLI 安装问题

• 问题：安装过程中出现权限错误 解决：以管理员身份运行命令提示符或 PowerShell

• 问题：安装后 expo 命令无法识别 解决：检查 npm 全局安装路径是否在系统环境变量 Path 中

React Native CLI 安装问题

• 问题：安装过程中出现依赖冲突 解决：尝试使用 npm install -g react-native-cli --force 强制安装

• 问题：react-native 命令无法识别 解决：检查 npm 全局安装路径是否在系统环境变量 Path 中

网络问题

• 问题：npm 安装速度慢或失败 解决：配置国内镜像，或使用代理

• 问题：Expo 命令无法连接到服务器 解决：检查网络连接，或使用 VPN

6. 总结

安装 Expo CLI 和 React Native CLI 是 React Native 开发的关键步骤。这两个工具分别用于创建和管理 Expo 项目和纯原生 React Native 项目。

配置好这些工具后，我们就可以开始创建和运行我们的第一个 React Native 项目了。

下一节，我们将介绍如何运行第一个 React Native 项目，实现 Hello World 应用。