macOS下搭建React Native的详细步骤

前言

最近一直在做 app 方面的开发，目前来说最常用的还是uniapp，心里多少有点不太想使用这个多端开发，编辑器也不顺手，想起了react-native和flutter，相比起来熟悉 react 的我选择了前者。

开发平台
macOS Big Sur
系统版本
11.2
芯片
intel，2017 款 8+256 （配置着实有点低）

配置环境

说起配置环境，刚开始也不慌，毕竟作为开发配置过的环境已经很多了，但遇到了这个react-native不得不说一下。这是我配置 React-Native 环境的第三次吧，前两次不用说（失败了，每次都还耗费了两三个小时至少），这次也是耗费了三四个小时吧，勉强算是成功。心里也是松了口气，万事开头难，开头成功了相当于已经完成了 90%。

环境依赖安装

基本配置如下：

附：我这里 pod -v 报错是因为使用的命令不对，改成 pod –version 就可以查看版本了。

官网的说法：

node 和 npm 的安装就不详说了，网上也有很多参考，重点说说下面的。
关于 yarn：
```
npm install -g yarn
```
react-native：
```
yarn add react-native --exact
```
brew：
brew 的安装可以参考这篇文章
watchman：
```
brew install watchman
```
pod（cocoapods）：
js brew install cocoapods
当以上这些安装好以及相应的版本号都能出现后，基本的环境搭建算是 OK 了，接下来就是创建项目和开发工具的搭建以及配置。（创建项目出错耗费了我好久）

项目创建

使用 npx react-native 创建项目
js npx react-native init testapp
看起来一切顺利：

这个过程可能有点长（等了将近七八分钟）：

估计就是连接不上外网，下载这个一般开个代理会比较快点，也可以运行下这个：

1.  git config --global --unset http.proxy
2.  git config --global --unset https.proxy

设置完成后再重新创建项目试试，没啥报错的话就 OK 了，可以直接到安装软件那一步了。

但是我的本地还是报这个错无法解决，最后我查了好久，试试 init 创建项目（如下）：

react-native init testapp

结果呢，又出现了另一个错误：

此刻都有点想放弃了，配置个环境真麻烦。。。

此时的项目结构是这样：

然后各种百度、google 一大堆，有如下的方法：

将 react-native 更新到最新
```
yarn add react-native --exact
```
结果还是一样。。。
指定项目的版本号：（试了好几次不行，最后花了好长时间，用了一个低的版本创建，结果就成功了！！！应该算是成功了吧），至少不报刚才的错误了。
js react-native init testapp --version 0.44.0

效果如下：（出来了运行命令，应该是没多大问题了）

安装软件

上次安装了Android Studio，过程比较麻烦，后续环境没弄成功还被我卸载了。所以决定这次用 ios 的 Xcode 吧，反正也就是看看模拟器的效果。
在 App Store 搜索 xcode 安装，安装的时候提示了我这个，特意看了下系统的版本要求：

发现我自己的版本过低，万一安装出问题了重新下载比较麻烦（毕竟 10 多个 g）：

去官网看看，下载之前的版本：

这里可以看到与自己电脑相匹配版本的 xcode：

找到自己电脑匹配的进行下载，下载的时候还要登录 AppleID：

这个过程可能有点久，网速好点的话可能会快点。

大概半来个小时吧，下载完成（主要看网速），完成后进行解压安装，解压也有点久，如果版本匹配的话更推荐在 App Store 下载，因为解压太久了，我差不多花了半小时才解压完。

解压完成后：（可能是把大多数的 ios 和 tv 的 jdk 都下载了，有点大吧）

项目的目录结构是这样：（看到有个 index.ios.js 和 index.android.js 感觉不太妙，因为老的版本有个两个文件，新版本的话只有 index.js）

Xcode 安装好后运行项目中的 ios 目录，选择好模拟器的型号后，点击这个三角形运行。

如图所示：（等待开机）

468401657525269_.pic.jpg
开机后，又等了一会，也没有出现想象中欢迎的界面：（白白的啥也没有，应该是出问题了）

重新建一个高点的版本项目试试：（这次不指定版本号了，感觉可能又要出其它问题）
首先重新安装了下 cocoapods（一直是在安装 pods 依赖出的问题）
js sudo gem install cocoapods
关于 cocoapods 的问题可以参考这个链接。
重新建项目
```
npx react-native init AwesomeProject
```
又出现错误