RN Mac 环境搭建问题彻底搞定

JakePrims
2,451 阅读3分钟

在使用RN cli 初始化项目的时候经常遇到各种问题 尤其是IOS环境问题。

Homebrew

在知乎上有位大牛提供了 Homebrew 镜像源及工具，你可以通过如下命令一键安装。


$ /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

image.png

Node 和 NVM

第二步是安装 Node 和 NPM。Node 是 React Native 应用程序中，JavaScript 相关服务的运行环境，比如构建服务就是通过 Node 环境提供的。安装的 Node，会自带 NPM 包管理器，它将帮助我们管理相关依赖。我们可以通过 Homebrew 来安装 Node。

$ brew install node

安装完成后，你可以通过如下命令检查 Node 和 NPM 是否安装成功。


$ node --version
$ npm --version

image 1.png

安装完 NPM 后，为保证后续网络的畅通，你需要将 NPM 的 registry 设置为淘宝源。切换命令如下：

npx nrm use taobao

Watchman

第三步，是安装一个名为 Watchman 的工具。它是由 Facebook 开发的一个工具，只要你的文件有一些变化，它就会自动重新运行你的项目。我们使用 Homebrew 来安装 watchman。


$ brew install watchman

安装完成后，通过如下命令检查是否安装成功。


$ watchman --version

image 2.png

Ruby

第四步，要安装的是 Ruby。Ruby 是一种常用编程语言。在 React Native iOS 应用的依赖管理中会使用到它。Mac 电脑上默认集成了 Ruby，但却和 React Native 所依赖的 Ruby 版本有些不一致。因此，你需要通过 rbenv 对 Ruby 进行版本管理，就像使用 NVM 工具用于管理 Node 的版本一样。首先，你可以运行如下命令查看当前的 Ruby 版本。


$ ruby --version

image 3.png

系统自带的 Ruby 是 2.6.10 版本，而 React Native 0.71 所依赖的 Ruby 版本是 2.7.6。因此，我们需要使用 rbenv 将 Ruby 版本切换到 2.7.6。接着，你可以使用 Homebrew 安装 rbenv，安装命令如下：


$ brew install rbenv ruby-build

安装完成后，运行 init 命令。运行完成后，它会提示你需要在 .zshrc 文件中执行 rbenv init 命令，因此你需要根据提示，使用 echo 将 init 命令添加到 Terminal 启动前。以保障 Terminal 启动时，rbenv 会生效。相关命令如下：


$ rbenv init

# 每人的提示信息不一定相同，根据提示信息进行相关操作
$ echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc

image 4.png

命令执行完成后，重启 Terminal，安装并切换到 React Native 所依赖的 Ruby 版本。


$ rbenv install 2.7.6
$ rbenv global 2.7.6

切换完成 Ruby 版本后，再次重启 Terminal，再次运行 ruby --version 命令，确定 Ruby 版本是否切换成功。

image 5.png

Gem 和 Bundler

第五步，是切换 Ruby 包管理工具的镜像源。Ruby 有两种常用包管理工具，Gem 和 Bundler。这两种包管理工具都会用到，因此需要将这两种包管理工具的镜像源都切换到国内。切换 Gem 镜像源的方法是通过 gem sources 命令进行切换，命令如下：


$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.com

这里我们使用 Ruby China 提供的镜像源进行安装。切换 Bundler 镜像源的方法是通过设置 config 进行切换，命令如下：


$ bundle config mirror.https://rubygems.org https://gems.ruby-china.com

具体来说，它会在 Bundler 的全局配置中添加一个 mirror.rubygems.org 的参数，将其值设置为 gems.ruby-china.com，表示在下载和安装包时使用 Ruby China 的镜像源地址。

CocoaPods

第七步，是安装 CocoaPods。在前面我们提到过，Ruby 有两种常用包管理工具，Gem 和 Bundler。CocoaPods 是另一种包管理工具，它虽然是用 Ruby 编写的，但不是 Ruby 的包管理工具，而是 iOS 的包管理工具。这里我们借助 Gem 来安装 CocoaPods。


$ sudo gem install cocoapods

安装完成后，运行如下命令确定 CocoaPods 是否已经安装成功。


$ pod --version
1.11.3

新建项目

npx react-native init AwesomeProject

经常出现的错误：

image 6.png

这是由于没有切换 CocoaPods 的镜像源导致的。解决方案是，切换到清华大学开源软件镜像站的镜像，切换方式如下：


$ cd ~/.cocoapods/repos 
$ pod repo remove master
$ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

执行完上述命令后，进入 AwesomeProject/ios 目录，找到 Podfile 文件，在文件第一行添加：


source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

这时，再在 AwesomeProject/ios 目录下，运行 CocoaPods 安装命令即可。


$ bundle exec pod install

但是，此时仍可能会遇到报错，报错内容如下，例如：

image 7.png

报错的内容是，无法访问地址 github.com/lblasa/doub…

这是因为，即便配置了镜像，但镜像提供的地址仍然是 GitHub 地址。执行 pod install 时，没有访问到 GitHub 地址。那么该怎么办呢？

解决方案是，我们可以把所有的 GitHub 地址替换成 Gitee 地址，主要有以下四步（该方案由群友柯察提供）：

  1. 将 GitHub 仓库导入到 Gitee将

  2. GitHub 地址的相关配置，手动替换为 Gitee 地址

  3. 重新 pod install

  4. 如遇报错，继续重复上述步骤下面我们逐个步骤看一下。

第一步，将 GitHub 仓库导入到 Gitee (自己在gitee注册一个账号即可)

首先，登录 Gitee。从右上角的 “+” 号中找到“从 GitHub/GitLab 导入仓库”的功能。填写对应的 GitHub 地址，然后点击导入。

image 8.png

接着，进入该仓库后，找到 “克隆 / 下载” 按钮，复制其 HTTPS 地址，示例如下：

image 9.png

第二步，将 GitHub 地址的相关配置，手动替换为 Gitee 地址，详细操作如下。

首先，使用 VSCode 编辑器，打开目录 ~/.cocoapods/repos/master。

image 10.png

然后，点击 Search 一栏，将 GitHub 地址替换成 Gitee 地址。


Github地址：github.com/lblasa/double-conversion.git

Gitee地址：gitee.com/jhwleo/double-conversion.git

image 11.png

第三步，重新 pod install。由于下载地址已经改成了 Gitee，再次运行 pod install 时，就不会遇到 double-conversion 库无法访问的报错了。

在第二次安装的时候，已经安装成功。但是，我们又遇到了其他库的网络错误。因此，第四步是不断重复前三步的，我们现在要做的就是将所有下载不了的 GitHub 地址都逐一替换成 Gitee 地址，完成 pod install 的步骤。当然，由于在上述方案中，你需要一个个手动地进行更改和重试。所以建议有条件的同学，还是通过保持网络畅通的方式进行下载更为方便。

avatar
文章
阅读
粉丝