上一篇文章咱们聊了 React Native 是啥,今天咱们来聊聊开发环境的搭建。说实话,环境搭建这块,我一开始也踩了不少坑。Node.js 版本不对、npm 镜像源太慢、环境变量没配好… 各种问题都遇到过。

今天就把这些坑都列出来,帮你一次性搞定。

为什么需要 Node.js?

React Native 是基于 JavaScript 的,所以需要一个 JavaScript 运行环境。Node.js 就是这个环境。

Node.js 是啥?简单说,它让 JavaScript 能在电脑上运行,而不是只在浏览器里。有了 Node.js,你才能运行 React Native 的开发工具,比如 Metro(打包工具)、npm(包管理器)这些。

在这里插入图片描述

安装 Node.js

版本选择

React Native 对 Node.js 的版本有要求,一般需要 16 以上,推荐用 18.x 的 LTS 版本。LTS 是 Long Term Support 的意思,就是长期支持版本,比较稳定。

别用太新的版本,比如 20、21 这些,可能会有兼容性问题。也别用太老的版本,比如 14、15,功能不够。

Windows 安装

Windows 安装最简单,直接去官网下载安装包就行:

  1. 打开 Node.js 官网(https://nodejs.org/)
  2. 下载 Windows Installer (.msi),选 LTS 版本
  3. 双击安装,一路下一步就行
  4. 安装完成后,打开命令行(cmd 或 PowerShell),输入:
node -v
npm -v

如果能看到版本号,说明安装成功了。

在这里插入图片描述

macOS 安装

macOS 有两种方式:

方式一:官网下载安装包

和 Windows 一样,去官网下载 .pkg 文件,双击安装就行。

方式二:用 Homebrew

如果你装了 Homebrew,可以用这个命令:

brew install node@18

这种方式的好处是,以后升级或者卸载都比较方便。

安装完成后,同样用 node -vnpm -v 检查一下。

配置 npm 镜像源

npm 默认的镜像源在国外,下载速度很慢。建议换成国内的镜像源,比如淘宝镜像。

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

# 验证配置
npm config get registry

设置完以后,npm install 的速度会快很多。

如果你用的是 yarn,也可以设置镜像:

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

在这里插入图片描述

安装 Yarn(可选)

Yarn 是另一个包管理器,和 npm 功能差不多,但速度更快,而且有更好的依赖锁定机制。

不是必须的,但如果你经常安装依赖,建议装一个:

npm install -g yarn

安装完成后,可以用 yarn -v 检查版本。

在这里插入图片描述

常见问题

1. 命令找不到(command not found)

这个问题通常是环境变量没配好。Windows 的话,安装 Node.js 的时候一般会自动配置。如果还是找不到,手动加一下环境变量:

  • 找到 Node.js 的安装目录(一般在 C:\Program Files\nodejs
  • 把这个目录加到 PATH 环境变量里

macOS 和 Linux 的话,可能需要手动配置。把 Node.js 的 bin 目录加到 PATH 里就行。

2. 权限问题

macOS 和 Linux 上,有时候会遇到权限问题。可以用 sudo,但更推荐用 nvm(Node Version Manager)来管理 Node.js,这样就不需要 sudo 了。

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 使用 nvm 安装 Node.js
nvm install 18
nvm use 18

3. 版本冲突

如果你之前装过 Node.js,可能版本不对。建议先卸载旧版本,再装新版本。

Windows 的话,在控制面板里卸载就行。macOS 和 Linux,找到安装目录删除,或者用包管理器卸载。

验证安装

安装完成后,运行这几个命令验证一下:

# 检查 Node.js 版本
node -v
# 应该显示 v18.x.x

# 检查 npm 版本
npm -v
# 应该显示 9.x.x 或更高

# 检查 npm 镜像源
npm config get registry
# 应该显示 https://registry.npmmirror.com

都正常的话,Node.js 环境就搭建好了。

在这里插入图片描述

下一步

Node.js 装好了,接下来就是安装 React Native CLI 和 DevEco Studio。DevEco Studio 是华为提供的开发工具,专门用来开发鸿蒙应用。

下一篇文章,咱们详细聊聊 DevEco Studio 的安装和配置。这个工具很重要,因为 React Native 的代码最终还是要打包成鸿蒙应用,这个过程需要在 DevEco Studio 里完成。

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐