搭建环境

本文介绍进行面板开发前所必要的环境搭建工作。

• 如果您需要基于 Windows 系统开发面板，需要安装：

  • Node.js 版本管理器（Node Version Manager，即 NVM）
  • Yarn

• 如果您需要基于 macOS 系统开发面板，需要安装：

  • NVM
  • Yarn
  • Homebrew 和 Watchman

安装开发工具

面板 SDK 开发前，请您按需自行下载安装下列推荐的编辑器：

• Visual Studio Code ：（推荐）自带格式化、代码跳转等常用功能，社区贡献与活跃度较高。
• WebStorm：集成度较高的 IDE。
• Sublime Text：小巧轻便。
• Atom：小巧轻便。

安装 NVM

1. 打开终端。

2. 安装 NVM。

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
   

3. （可选）输入 nvm -v，确认 NVM 已正常安装。

   输出版本号，则表明安装成功。若报错 nvm: command not found，您可参考文末 常见问题 的解决方法。

4. 输入nvm install 10.15.0 ，安装 Node.js 10.15.0 版本。

   建议安装 Node.js 10.15.0 及以上版本。

5. （可选）支持通过 nvm use 命令切换至指定 Node.js 版本。

   nvm use 10.15.0   
   

安装 Yarn

1. 打开终端。

2. 输入npm install -g yarn，安装 Yarn。

3. （可选）输入 yarn -v ，确认 Yarn 已正常安装。

安装 Homebrew 及 Watchman

1. 打开终端。

2. 输入以下命令，安装 Homebrew。

   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
   

3. 输入 brew install watchman，安装 Watchman。

常见问题

Q：输入 nvm -v 时，为什么报错 nvm: command not found？

A：可能的原因是 NVM 所在的路径未设置为环境变量，您可以参照下述步骤设置环境变量：

1. 打开终端。

2. 输入cd ~ ，进入当前用户的 Home 目录。

3. 输入以下命令，打开配置文件。

   • Window 系统

     open .bash_profile
     

   • 新版 macOS 系统

     open .zshrc
     

4. 在配置文件中，复制以下代码后，保存文件。

   export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
   

5. 输入 source .bash_profile 或 source .zshrc，重新加载配置文件。

6. 输入 nvm -v，查看 NVM 版本，验证是否安装成功。

Q：macOS 系统无法安装 Homebrew，怎么办？

A：如果您的电脑中没有 Xcode 命令行工具，安装 Homebrew 可能会失败。

• 解决方案 1：安装 Xcode。

• 解决方案 2：使用命令在线安装。

  1. 打开 Mac 终端。
  2. 输入 cd ~ ，进入当前用户的 Home 目录。
  3. 输入 xcode-select --install，安装 Xcode 命令行工具安装包。

相关文档

安装或者运行 RN 的过程中，如果出现错误提示，可查看 RN 社区的常见错误文档。

• 中文版：React Native 常见问题
• 英文版：React Native Troubleshooting