ReactNative的环境搭建(macOS Catalina系统)

macOS Catalina 版本10.15.4

1,安装Homebrew

Homebrew是OS X的套件(包)管理器，我们可以通过它获取并且安装很多组件
安装方式：终端执行

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

查看是否安装成功

brew -v

2，安装Node.js 和 npm

直接下载安装 Node.js 网址：nodejs.org/en/download…
node安装好了npm(Node Package Manager,Node.js内置了npm)自动就有了
查看node版本

node -v

3，安装WatchMan

改插件用于监控bug文件和文件变化，并且可以触发指定操作
安装方式
```
brew install watchman
```
查看安装版本
```
watchman -v
```

4，安装Flow

flow是一个 JavaScript 的静态类型检查器，建议安装，以方便找出代码中可能存在的类型错误
安装方式
```
brew install flow
```
查看安装的版本
```
flow version
```

5，设置nmp的镜像

我这里使用的是：http://registry.cnpmjs.org

npm config set registry http://registry.cnpmjs.org

设置之后可以 open .npmrc 查看下
```
open .npmrc
```
如图，之前用的是淘宝的源，暂时没有替换disurl

5，安装ReactNative、 Yarn

老的安装方式：安装命令(如果报权限问题，前面加sudo就可以了)
```
npm install -g react-native-cli
```

同时安装Yarn的 (Yarn是为了替代npm而出现的)

npm install -g yarn react-native-cli
/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ react-native-cli@2.0.1
+ yarn@1.22.4
added 79 packages from 28 contributors in 12.912s

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

6,创建一个React-Native项目

react-native init xxx

react-native init AHelloworld

命令执行之后如图

#但是会出现问题 info Installing required CocoaPods dependencies 卡在这里

如图

按照上图提示 cd 到该项目文件夹，执行 pod install
```
pod install
```
这次卡在了 Installing boost-for-react-native (1.63.0) 如下图

试了好多方法都不灵，后来根据我升级macOS Catalina系统之后重新安装cocoaPods遇到的 pod update 失败问题的思路，找到了方法。

在改项目的 Podfile 文件中，写入以下代码

pod 'boost-for-react-native', :git => 'https://gitee.com/damon-s/boost-for-react-native.git'

然后执行 pod install 成功导入

7,在iOS模拟器运行React-Native项目

可以cd到项目主目录，执行 react-native run-ios

react-native run-ios
info Found Xcode workspace "AHelloworld.xcworkspace"
info Building (using "xcodebuild -workspace AHelloworld.xcworkspace -configuration Debug -scheme AHelloworld -destination id=ABF51D6F-727B-40A1-B338-A339293C9FE2")
..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
2020-04-12 01:26:59.956 xcodebuild[26633:1333838] [MT] DVTPlugInManager: Required plug-in compatibility UUID C80A9C11-3902-4885-944E-A035869BA910 for KSImageNamed.ideplugin (com.ksuther.KSImageNamed) not present
info Installing "/Users/mqing/Library/Developer/Xcode/DerivedData/AHelloworld-fwadcktyjuowifdcvdtjhrqivbfs/Build/Products/Debug-iphonesimulator/AHelloworld.app"
info Launching "org.reactjs.native.example.AHelloworld"
success Successfully launched the app on the simulator

也可以直接使用Xcode 用 .xcworkspace 工作区打开运行。