详解最新版 React Native搭建IOS环境过程

为什么要写这个文档，给新开发IOS APP的开发人员供给一个引导，并且能在建立过程中遇到的问题供给解决方案和思路，以至于能快速建立好开发环境。在建立过程中，笔者遇到了许多坑，初度建立IOS环境，并不顺利。

说明：我电脑运用的是 MacBook Pro 2018 款，体系版别是 macOS Monterey。本文是参考 React Native 0.71 版别的官方文档，建立 iOS开发环境。在按照官方文档建立的过程中，我遇到了较多的网络问题，建立环境之前，需求科学上网。

装置Xcode

首要需求装置Xcode，能够经过App Store下载，也能够在苹果官网下载最新版别的Xcode，装置完结后，找到左上角的 Xcode 标识，点击 Preferences，找到 Locations 标签中的 Command Line Tools 一栏，选择对应的 Xcode。

选择完结后，会呈现相似 /Applications/Xcode.app 之类的地址，你能够点进去，确认 Xcode 的目录地址是否正确。

装置Homebrew

如果你现已装置了Homebrew，请越过此过程。如果没有装置，翻开终端并张贴下面的指令进行装置：

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

如果履行这个指令后，报错的内容是 unable to access github，提示拜访不到 GitHub 地址。在后面还有十分多的相似网络报错，在这儿，我就不再一一列举了。解决方案都是相似的，需科学上网，保证自己的网络疏通。

装置完结后，重启当时 Terminal，你能够运转如下指令，查看它是否装置成功。

$ brew --version
Homebrew 4.0.6
Homebrew/homebrew-core (git revision fbc2e62; last commit 2023-03-13)

装置Node.js和NPM

Node 是 JavaScript 相关服务的运转环境，比如构建服务就是经过 Node 环境供给的。装置的 Node，会自带 NPM 包管理器，它将协助咱们管理相关依靠。

已装置可越过该过程，React Native需求Node.js环境，能够在官网下载最新版别的Node.js，也能够运用Homebrew进行装置：

brew install node

装置完结后，你能够经过如下指令查看 Node 和 NPM 是否装置成功。

$ node --version
v16.19.1
$ npm --version
8.19.3

装置Watchman

Watchman是由Facebook开发的文件监视器，在React Native中用于监听文件变化并主动履行相应的操作。能够运用Homebrew进行装置：

$ brew install watchman

装置完结后，经过如下指令查看是否装置成功。

$ watchman --version
2023.03.13.00

装置Ruby环境

Ruby 是一种面向对象的脚本语言，简略易用，功能强大，能跨渠道和可移植性好等等，在 iOS 运用的依靠管理中会运用到它。Mac 电脑上默许集成了 Ruby，但却和 React Native 所依靠的 Ruby 版别有些不一致。因此，你需求经过 rbenv 对 Ruby 进行版别管理，就像运用n东西用于管理 Node 的版别一样。

体系自带的 Ruby 是 2.6.10 版别，而 React Native 0.71 所依靠的 Ruby 版别是 2.7.6。因此，咱们需求运用 rbenv 将 Ruby 版别切换到 2.7.6。

首要，你能够运转如下指令查看当时的 Ruby 版别。

$ ruby --version
ruby 2.6.10p219 (2022-04-12 revision c9c2245c0a) [x86_64-darwin21]

接着，你能够运用 Homebrew 装置 rbenv，装置指令如下：

$ brew install rbenv ruby-build

装置完结后，运转 init 指令。运转完结后，它会提示你需求在 .zshrc 文件中履行 rbenv init 指令，因此你需求依据提示，运用 echo 将 init 指令增加到 Terminal 发动前。以保障 Terminal 发动时，rbenv 会生效。相关指令如下：

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

指令履行完结后，重启 Terminal，装置并切换到 React Native 所依靠的 Ruby 版别。

$ rbenv install 2.7.6
$ rbenv global 2.7.6

切换完结 Ruby 版别后，再次重启 Terminal，再次运转 ruby –version 指令，确认 Ruby 版别是否切换成功。

$ ruby --version
ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [x86_64-darwin21]

Gem 和 Bundler

Ruby 有两种常用包管理东西：Gem 和 Bundler。Ruby 的软件源运用的是亚马逊的云服务，国内网络环境下载时可能会呈现各种不稳定和超时，所以如果您用自带的需求科学上网，这两种包管理东西都会用到，你能够将官方 ruby 源替换成国内清华源 （mirrors.tuna.tsinghua.edu.cn/rubygems/）。

# 增加镜像源并移除默许源
$ gem sources --add https://mirrors.tuna.tsinghua.edu.cn/rubygems/ --remove https://rubygems.org/
# 列出已有源
$ gem sources -l
# 镜像源只有一个
*** CURRENT SOURCES ***
https://mirrors.tuna.tsinghua.edu.cn/rubygems/

切换 Bundler 镜像源的方法是经过设置 config 进行切换，指令如下：

$ bundle config mirror.https://rubygems.org https://mirrors.tuna.tsinghua.edu.cn/rubygems

具体来说，它会在 Bundler 的大局配置中增加一个 mirror.rubygems.org 的参数，将其值设置为 mirrors.tuna.tsinghua.edu.cn/rubygems, 表示在下载和装置包时运用清华大学的镜像源地址。

装置CocoaPods

在前面提到过，Ruby 有两种常用包管理东西，Gem 和 Bundler。CocoaPods 是另一种包管理东西，它虽然是用 Ruby 编写的，但不是 Ruby 的包管理东西，而是 iOS 的包管理东西。

这儿咱们凭借 Gem 来装置 CocoaPods：

$ sudo gem install cocoapods

装置完结后，运转如下指令确认 CocoaPods 是否现已装置成功。

$ pod --version
1.12.0

新建项目

这儿咱们凭借 React Native 内置的指令行东西，来创建一个名为 “AwesomeProject” 的新项目。

$ npx react-native init AwesomeProject

但是，在 Installing CocoaPods dependencies 这一步会呈现过错，过错截图如下所示：

这是因为没有切换 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 --verbose

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

报错信息curl: (92) HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)，报错的内容是，拜访地址 repo1.maven.org/maven2/com/…, 这个库下载极慢，解决方案：

$ git config --global http.version HTTP/1.1

发动项目

查看开发环境

好了，经过上面的作业，这时候终于能够跑项目了。进入项目根目录，履行 npx react-native doctor 指令查看IOS开发环境是否都已满足：

Common
 ✓ Node.js
 ✓ npm
 ✓ Watchman - Used for watching changes in the filesystem when in development mode
Android
 ✓ JDK
 ✓ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME
iOS
 ✓ Xcode - Required for building and installing your app on iOS
 ✓ CocoaPods - Required for installing iOS dependencies
 ● ios-deploy - Required for installing your app on a physical device with the CLI
 ✓ .xcode.env - File to customize Xcode environment

如果不满足，能够依据上面的提示手动处理修复开发环境。

如果已满足，运转 npx react-native info 输出开发环境信息，再次确认

info Fetching system and libraries information...
System:
    OS: macOS 12.6.3
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 47.88 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
    Watchman: 2023.03.13.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /Users/zhouqiyuan/.rvm/rubies/ruby-2.7.6/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 12.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.3 => 0.71.3
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

发动项目

项目根目录，运转如下指令来发动 iOS 项目：

$ npx react-native run-ios

至此，咱们现已成功建立了 React Native 的开发环境，并成功运转了一个 React Native 项目。

总结

建立开发环境是做新项目前期的痛点，过程会比较折腾，这一步劝退了许多想开发React Native的同学。在本文中，它主要包含八个过程，触及了 Xcode、Homebrew、Node、Watchman、Ruby、Gem、Bundler、CocoaPods 的装置、镜像配置、网络问题解决方案，以及怎么新建项目和发动项目。

你在建立 React Native 环境的过程中，遇到过哪些问题呢，能把你的解决方案和我们分享吗？