01环境搭建--001--Mac环境搭建

[TOC]

安装依赖

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

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

安装 Node、Watchman

使用 HomeBrew 来安装 Node 和 Watchman。在命令行中执行下列命令安装（如安装较慢可以尝试阿里云的镜像源 https://developer.aliyun.com/mirror/homebrew）：

brew install node
brew install watchman

如果你已经安装了 Node，请检查其版本是否在 v12 以上。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

# 使用nrm工具切换淘宝源
(sudo) npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

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

安装 Yarn

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

npm install -g yarn

安装 Xcode

React Native 目前需要Xcode 10 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

• Xcode 的命令行工具
• git
• CocoaPods

安装 CocoaPods

CocoaPods是用 Ruby 编写的包管理器。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 cocoapods。

当然安装可能也不顺利，请尝试翻墙或寻找一些国内可用的镜像源。

sudo gem install cocoapods

指定安装路径

sudo gem install -n /usr/local/bin/ cocoapods

或者可以使用 brew 来安装

brew install cocoapods

命令执行结束之后再输入pod setup，安装pod

另外目前最新版本似乎不能在 ruby2.6 版本以下安装，意味着如果你使用的 macOS 版本低于 10.15 (Catalina) 则无法直接安装。可以尝试安装较旧一些的版本。如sudo gem install cocoapods -v 1.8.4，参考 issue 链接 https://github.com/CocoaPods/CocoaPods/issues/9568

要了解更多信息，可以访问CocoaPods 的官网。

---

上面的是RN中文网上介绍的内容，如果使用上面的安装失败，则可以参考下面的内容

1、查看当前Ruby版本

ruby -v

2、升级Ruby环境，首先需要安装rvm（第一步要下载一些东西等两分钟左右）

curl -L get.rvm.io | bash -s stable 

source ~/.bashrc

source ~/.bash_profile

3、查看rvm版本

rvm -v 

显示如下(或者是其他版本)

rvm 1.29.3 (latest) by Michal Papis, Piotr Kuczynski, Wayne E. Seguin [https://rvm.io]

4、列出ruby可安装的版本信息

rvm list known

5、安装一个ruby版本

rvm install 2.7.0

6、设置为默认版本

rvm use 2.7.0 --default

7、更换源

sudo gem update --system

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

gem sources --add https://gems.ruby-china.com/

8、为了验证你的Ruby镜像是并且仅是ruby-china，执行以下命令查看
gem sources -l

如果是以下结果说明正确，如果有其他的请自行百度解决

*** CURRENT SOURCES ***

https://gems.ruby-china.com/

9、这时候才正式开始安装CocoaPods

sudo gem install -n /usr/local/bin cocoapods

10、如果安装了多个Xcode使用下面的命令选择（一般需要选择最近的Xcode版本）

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

11、安装本地库

pod setup

12、执行以上命令后

Setting up CocoaPods master repo
  $ /usr/bin/git clone https://github.com/CocoaPods/Specs.git master --progress
  Cloning into 'master'...
  remote: Counting objects: 1879515, done.        
  remote: Compressing objects: 100% (321/321), done.        
  Receiving objects:  21% (404525/1879515), 73.70 MiB | 22.00 KiB/

最新版的MacOS Catalina系统命令行执行pod setup命令直接结束啦；
莫着急，我们手动安装本地库，速度绝对快
命令行执行以下操作

git clone https://github.com/CocoaPods/Specs.git ~/.cocoapods/repos/trunk
注意：
注意：
注意：
重要的事情要重申：

使用这个命令执行等待一段时间之后大有可能会失败，
原因基本是网络问题，
请不要着急，
根据自己和小伙伴的多次测试，
只有在使用移动手机网络或者在凌晨的时候网速才会理想
（大概几分钟就OK，其他情况下即使你的网络带宽很好也没用）

如果你晚上熬不住，早上起不来，手机流量又没了，那就往下看吧！哎。。。。。。。

或者使用下面的，国内镜像，速度刚刚的

git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git  ~/.cocoapods/repos/trunk

目录结构见下图,如果不是就自己手动移动一下

image.png

如果还不行

// 安装最新版cocoapods
sudo gem install cocoapods --pre
// 移除本地master
sudo rm -fr ~/.cocoapods/repos/master
// 移除本地缓存
sudo rm -fr ~/Library/Caches/CocoaPods/
// 重新setup，如果很慢可使用问题1的解决方法（git clone）
pod setup --verbose
// 移除trunk
pod repo remove trunk

以下一段忽略,直接看 第13步:

要查看文件下载进度的可以另外打开一个终端窗口(快捷键:选中终端按下Command+N组合键)，输入以下两行命令回车执行

cd ~/.cocoapods

du -sh *

执行du -sh *之后会显示已下载的文件大小，可以多次执行来监看下载进度，如果之前还有文件大小，后来变成0了，可能是网络问题，下载已经中断了,需要结束命令并从新执行 pod setup

13、下载安装完成之后可执行下列命令检查是否可用（第一次使用可能要等一会）

pod search AFNetworking

14、CocoaPods的具体使用

新建一个Xcode工程，使用终端cd到工程目录下

创建Podfile文件：

pod init

之后就可以在项目目录里看到一个Podfile文件

打开Podfile文件：

open Podfile

添加：

pod 'AFNetworking'

保存后退出

开始下载：

pod install

创建新项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用（注意 init 命令默认会创建最新的版本）：

• 必须要看的注意事项一：

  0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译，请务必使用稳定的代理软件并确定其配置对命令行有效。

• 必须要看的注意事项二：

  0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。CocoaPods 的仓库在国内也很难访问。如果在 CocoaPods 的依赖安装步骤卡很久（命令行停在 Installing CocoaPods dependencies），请务必使用稳定的代理软件并确定其配置对命令行有效。

• 必须要看的注意事项三：

  • 请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。

  • 请不要使用与核心模块同名的项目名（如 react, react-native 等）。

  • 请不要在目录、文件名中使用中文、空格等特殊符号。

npx react-native init AwesomeProject

【提示】：你可以使用--version参数（注意是两个杠）创建指定版本的项目。例如npx react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

编译并运行 React Native 应用

【提示】路径中不要有中文！！！

在你的项目目录中运行yarn ios或者yarn react-native run-ios：

cd AwesomeProject
yarn iOS
# 或者
yarn react-native run-ios

提示：如果此命令无法正常运行，请使用 Xcode 运行来查看具体错误（run-ios 的报错没有任何具体信息）。注意 0.60 版本之后的主项目文件是.xcworkspace，不是.xcodeproj！

很快就应该能看到 iOS 模拟器自动启动并运行你的项目。

image.png

yarn react-native run-ios只是运行应用的方式之一。你也可以在 Xcode 中直接运行应用。注意 0.60 版本之后的主项目文件是.xcworkspace，不是.xcodeproj。

如果你无法正常运行，先回头仔细对照文档检查，然后可以看看讨论区。

修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

使用你喜欢的编辑器打开App.js并随便改上几行。

• 在 iOS 模拟器中按下⌘-R就可以刷新 APP 并看到你的最新修改！（如果没有反应，请检查模拟器的
• Hardware 菜单中，connect hardware keyboard 选项是否选中开启）

环境搭建问题记录

Error: Failed to download resource "icu4c"

安装 [ 'react-native@latest' ] 失败，错误代码：243

全局安装 create-react-app

npm install -g create-react-app 

Failed to connect to raw.githubusercontent.com port 443: Connection refused error:

在host中加入以下

199.232.28.133 raw.githubusercontent.com

image.png

升级Node

1. 查看本机当前Node和npm版本

   node -v
   npm -v
   

2. 清除node的cache

   sudo npm cache clean -f
   

3. 安装"n"版本管理工具，管理node（没有错，就是n）

   sudo npm install -g n 
   

4. 更新node版本

   sudo n stable 
   

5. 更新npm版本

   sudo npm install npm@latest -g 
   

6. 再查一遍本机当前Node和npm的版本吧

   node -v 
   npm -v 
   

image.png

[pod install]: Error installing DoubleConversion

• [!] Error installing Flipper-RSocket (1.1.0)

报错原因

在RN工程中，当我们使用cocoapods来安装一些RN必须的第三方编译库（比如Folly、boost），由于这些编译库是在国外，并且无论翻墙与否，很多时候直接使用cocoapods来自动下载安装基本都会失败，最近尝试在原来的RN工程和新建的RN工程上面都做了尝试，结果尝试了3天，基本都是失败的，报错的原因都是一样，这样的话，项目根本没法运行。因此，在这种自动安装经常失败甚至一直失败的情况下，了解手动下载安装就必不可少了。

➜  ios pod install
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing DoubleConversion (1.1.6)

[!] Error installing DoubleConversion
[!] /usr/local/bin/git clone https://github.com/google/double-conversion.git /var/folders/mn/7jdnkyy91_n0bxkrgjgjk17c0000gn/T/d20191212-36568-33nxni --template= --single-branch --depth 1 --branch v1.1.6

Cloning into '/var/folders/mn/7jdnkyy91_n0bxkrgjgjk17c0000gn/T/d20191212-36568-33nxni'...
error: RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
fatal: the remote end hung up unexpectedly
fatal: early EOF
fatal: unpack-objects failed

RPC(Remote Procedure Call)连接失败，基本可以判定是由于网络原因，这种可能性很多，代理、局域网等等，尤其是针对国外的一些资源，对于国内的开发者来说，很不友好。

解决问题

• 找到这些三方库

image.png

• 手动去GitHub下载release > tar.gz
• 将压缩包放到 ~/Library/Caches/com.facebook.ReactNativeBuild 目录下，如果文件夹不存在，手动创建即可

因为网速问题，下载其他库的时候也有可能会失败，失败了就再来一次就好，多pod install几次，总能成功的。

几次都不成功的话，还是按照上面的办法来处理

---

参考链接：
React Native 中文网-搭建开发环境