2020年12月国内网络环境下macOS 搭建 React Native开发环境

---

前言

有些小伙伴，试了一下React Native环境搭建后就放弃了。RN的环境搭建对一些自学小伙伴确实不友好。个人经历，第一次搭建React Native的开发环境，花了一整天时间。

以前也想做过这样的教程，环境搭建好就不想卸载重新安装了。近期系统重装了，我搭建环境的过程正常记录下来。

搭建完整原生环境 与 简易沙盒环境（Expo）区别

使用 React Native 开发，有两种选择。这两种我都在用，对于有时间的朋友建设都了解一下比较好。他们大部分内容是通的，这样你的学习资源会变多。跟据我个人使用体验，总结如下。

• 搭建React Native 原生开发环境（推荐）
  自由度高，甚至可以跟原生代码配合使用。搭建环境相对复杂很多，甚至能劝退一部分人。使用的时候新手能遇到一堆红屏问题。有一点的上手难度。想要开发iOS应用必需要有Mac环境。首次编译比较慢。
  中文版：https://reactnative.cn/
  英文版：https://reactnative.dev/

• 简易沙盒环境Expo 全家桶（简单）
  环境搭建简单，Windows下也可以开发iOS 应用，前题你要有iPhone。这里集成了好多常用的组件，但是很多组件在国内的网络环境下基本无法使用，比如：Google ，Facebook相关的组件。开发普通的app绰绰有余。如果你app中要调用一些国内的组件，比如：高德地图之类的，集成进去不方便。
  https://expo.io/

搭建环境实战

官方的《React Native 搭建开发环境》
https://reactnative.cn/docs/getting-started.html
这篇文章里写的已经非常详细了，读者直接看这篇文章遇到问题百度一下就能搞定了。如果你不想去百度，就接着看我的实战记录吧。我的系统版本是macOS Big sur 11.0.1 不同版本差距是不大的。

搭建环境的难点

• 使用的部分组件默认源在国外，国内网络不畅通。10k/s 的速度甚至连接失败的情况实有发生。
• 各种软件版本不一致也可能会导致完全按照文档操作，环境搭建出现还是会报错。
• 文档有部分内容写的比较简洁，从没接触过的新手可能会看不明白。

解决办法：

• 能使用国内源的软件使用国内源提速度
• 切换自己的网络环境，只是个思考不保住一定有效。比如：办公室网络慢，我的电信宽带下载速度在 10K～30K/S，真是慢啊。开手机热点试试。我实测南京的联通4G开 热点访问GitHub是真的快。2～3MB/S 下载速度。
• 开vpn或者代理提速，这个不强求有资源的可以试试。

实战

安装依赖
必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

安装Xcode

App Store搜索 Xcode 就可以安装了。体积较大，所以先安装它，下载安装几乎不用我们操作。
Xcode安装的过程，我们可以进行其他的软件的安装。

这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

Xcode安装完成后，记得自己手动运行一下Xcode，第一次运行会自动安装一些组件。

安装 Homebrew

有些同学在这步就卡住啦，默认安装方式比较慢，甚至会失败。没关系网上有大神已经帮我们解决了。
《Homebrew国内如何自动安装（国内地址）》：https://zhuanlan.zhihu.com/p/111014448

我安装的时间是参考这篇文章的，我这里把我的操作记录下来：
终端执行：

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

执行完脚本后，出现下面的界面，这里我选择的是1、中科大下载源。为什么选择1因为排在第一位吧，这里你可以根据自己的情况选择。

1=>Y=>输入密码，根据提示输入即可。最终到达下面的界面就说明成功了。

别忘记给原文作者点赞了哈。
整个下载过程我的电脑用时：约3分43 秒。 平均下载速度在 10Mb/S 仅供参考！比官网的快太多了。

安装 Node

我们推荐使用Homebrew来安装 Node，如果你已经安装了 Node，请检查其版本是否在 v12 以上。

brew install node

用时约 2分02秒。默认会安装最新版本的，我查了一是 v15.4.0。根据官方教程这样已经可以了。

node.js降级(非必需)

如果如果同一个项目，别人运行正常，你运行项目报错，很有可能是 node.js的版本不一致，请参考下面，node.js降级。因为项目需要我是要降级的。

这个时间点（2020-12-17）我建议使用 v14版本的，因为我们在工作中遇到过有同事使用 v15版本，部分代码报错的情况。

• 安装node版本管理模块n

sudo npm install n -g

• 安装指定版本的node.js sudo n 版本号,我这里使用的是。

sudo n 14.15.2

2021年12月21日更新
之前的版本有些老了，新建RN项目已经显示版本过低了，目前我使用的版本是
sudo n 14.18.2

node.js默认的源在国内也是很慢的，切换淘宝源。很重要一定不能忘记

npx nrm use taobao

执行这个命令就可以了。

安装 watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

补充：安装 watchman会依赖 python3 ,建议先手动安装 python3在执行下面命令。这点我也是安装完成后才知道的，所以费了点事。以前用macOS Catalina没太注意这点。我的安装实操如下：

brew install watchman

安装就简单的一行命令，安装时间比较久一些，要下载不少包，比如：python相关的一些内容。我的网络环境的python这块下载比较慢。
完成这步我电脑用时： 7分30秒

我这里过程有个报错信息：

大家的意思就有没有python 3.9吧，保险起见，我们安装一下吧。

brew install --build-from-source python@3.9

等待了一会儿安装成功啦。这次忘记计时了，约 5-7分钟这样的。
此时检查一下是否安装成功了
itkey@itkeydeMacBook-Pro ~ % watchman -v
zsh: command not found: watchman
发现因为上面的python问题并没有安装成功。
在次执行：

brew install watchman

这次安装非常快，3秒左右就完成了。

watchman -v显示版本是 4.9.0这时我们已经安装成功了。

安装 Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

虽然不是必须的，推荐安装。体验略好一些。

安装 CocoaPods

CocoaPods的安装有多少人是因为这步被劝退了的？反正我差点被劝退了，默认的安装过程真的慢的让人受不了（国内网络2-3个小时吧）。安装慢的原因： 国内网络访问GitHub慢导致的。

使用ruby-china的gem源

安装之前，我们使用ruby-china的gem源。不然默认源安装是很慢的。

gem sources --remove https://rubygems.org/

gem source -a https://gems.ruby-china.com

安装完以后，输入以下命令查看是否替换成功

gem sources -l

安装 cocoapods 1.8.4

为什么使用这个版本的呢？

• 我的同事们统一用这个版本的
• 1.8.4稳定好用，安装最新版本我遇到过坑
• 官方文档中有这么一段
  

我建议大家也使用这个版本，实践证明稳定好用。安装最新版本也不是不行，看个人选择。

 sudo gem install cocoapods -v 1.8.4

安装完以后，查看一下版本信息。
pod --version

这里有个 mode 040777的警告。虽然没有影响，但是看着很不舒服。解决办法：

sudo chmod go-w /usr/local/sbin

执行这个命令，以后就没有这个警告了。

使用清华源

同理还是因为国内的网络原因，这里我选择使用清华的cocoapods源。清华的原始说明：
《CocoaPods 镜像使用帮助》https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/
我第一次用的时候，这个文档我没太明白。主要我分不清我用的cocoaPods是新版本还是旧版，没有明确说时版本号。
经过我测试，这里我们安装的是cocoapods 1.8.4 是属于旧版的。
所以执行：

$ pod repo remove master
$ pod repo add master https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git
$ pod repo update

执行这三行命令就可以了，第一步如果之前没有master会报错，没有关系。第二步比较久。而且不显示速度和日志，不知道的还以为什么都没有动呢。第二步是要下载2G左右的文件，所以比较慢，如果用GitHub的更慢。

我这里第二步执行了 9分10秒，还是比较久的。
这三条命令都执行完了后，执行：

pod repo list

查看当前pod库的情况。我这显示如下，说明已经成功了。

如果你已经坚持到这了，那么恭喜你。环境搭建基本上是完成啦。

创建第1个React Native项目

npx react-native init AwesomeProject

第一次执行创建项目时间比较久，当你看到
Installing CocoaPods dependencies (this may take a few minutes)
如果你在这一步，卡住了也很正常。因为创建的新项目，默认是从GitHub下载一些内容，所以慢。
没有必要等下去。

解决办法：
找到你生成的项目中的Podfile文件。比如我的路径是：
/Users/itkey/AwesomeProject/ios/Podfile
编辑这个文件。在文件最上面加入一行。

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

如下：

这里可以把之前的命令终止了。快捷键^ +C 强行终止之前的命令。不用担心对你项目不会有任何影响。

然后执行：

cd AwesomeProject
cd ios
pod install --verbose

这样就会用pod安装一些必须的组件。–verbose这个参数是用来查看详情信息的，可以不带。
第一次建议带上，可以看出来卡在哪一卡了。

这种卡一般就是第一次卡，要么耐心等待，要么换换别的网络试试吧。这里我使用联通4G的热点就比较快了（有时也不快，这是一个路子）。换网络后，可以快捷键^ +C 强行终止之前的命令，然后在

 pod install --verbose

忍一忍这步解决了后续开发就顺畅了。
这步运行完成，没有报错。

返回项目目录，然后执行

yarn ios

• 运行 iOS 版本的
  
  第一次运行 iOS 项目编译时间很久，喝杯水去吧。运行成功，会自动打开 ios模拟器的。看到下面的界面，那么就恭喜你，成功啦。你的第一个React Native 的应该 成功运行了。
  

• 运行android 版本的

yarn android

前提是你的Android 开发环境已经搭建好了，搭建参考下一节。

Android 环境的搭建

官方文档写的已经很细了，而且我也没遇到什么坑。我就不详细写啦。参考这个文档就能解决了，如果还有问题，可以评论留言。
https://reactnative.cn/docs/getting-started.html

Github访问慢优化办法仅供参考

很多都能切换源，在开发过程中GitHub是必不可少的。
不一定对每个人都有效。

• 有线的宽带慢，你就试试你的手机开热点吧
• GitHub加速网上也有教程，这里就不多做介绍了。
  《国内加速访问Github的办法，超级简单》
  https://zhuanlan.zhihu.com/p/65154116
  我试过这个方法确实有用，不过时好时坏，可以一试。

我第一次安装成功是连接手机热点安装的。

总结

终于写完啦。都看到这里的，如果对您有一点帮助，点个赞👍 呗！