Explicação detalhada da versão mais recente do React Native para construir o processo do ambiente IOS

Por que escrever este documento para fornecer um guia para novos desenvolvedores de aplicativos IOS e fornecer soluções e ideias para problemas encontrados no processo de construção, para que o ambiente de desenvolvimento possa ser estabelecido rapidamente. Durante o processo de construção, o autor encontrou muitas armadilhas: a primeira vez que construí o ambiente IOS não foi tranquilo.

Observação: meu computador é um MacBook Pro 2018 e a versão do sistema é macOS Monterey. Este artigo refere-se à documentação oficial do React Native versão 0.71 para construir um ambiente de desenvolvimento iOS. No processo de construção de acordo com os documentos oficiais, encontrei muitos problemas de rede.Antes de construir o ambiente, preciso navegar na Internet cientificamente.

Instalar Xcode

Primeiro, você precisa instalar o Xcode, que pode ser baixado da App Store ou da versão mais recente do Xcode no site oficial da Apple. Após a conclusão da instalação, localize o logotipo do Xcode no canto superior esquerdo, clique em Preferências, localize a Linha de Comando Coluna Ferramentas na guia Locais e selecione o Xcode.

Depois que a seleção for concluída, um endereço como /Applications/Xcode.app aparecerá, você pode clicar para confirmar se o endereço do diretório do Xcode está correto.

Instalar Homebrew

Pule esta etapa se você já tiver o Homebrew instalado. Se não estiver instalado, abra um terminal e cole o seguinte comando para instalá-lo:

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

Se depois de executar este comando, o conteúdo do relatório de erro não conseguir acessar o github, indicando que o endereço do GitHub não pode ser acessado. Há muitos erros de rede semelhantes relatados posteriormente, então não vou listá-los um por um aqui. As soluções são semelhantes, você precisa navegar na Internet cientificamente para garantir que sua rede esteja estável.

Após a conclusão da instalação, reinicie o Terminal atual e você pode executar o seguinte comando para verificar se foi instalado com sucesso.

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

Instalar Node.js e NPM

Node é o ambiente de tempo de execução para serviços relacionados a JavaScript, como serviços de construção, que são fornecidos por meio do ambiente Node. O Node instalado terá seu próprio gerenciador de pacotes NPM, que nos ajudará a gerenciar as dependências relacionadas.

Você pode pular esta etapa se já o tiver instalado. O React Native requer um ambiente Node.js. Você pode baixar a versão mais recente do Node.js no site oficial ou usar o Homebrew para instalá-lo:

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
复制代码

No entanto, você ainda pode encontrar um relatório de erro neste momento, e o conteúdo do relatório de erro é o seguinte:

Captura de tela 2023-04-10 23.44.13.png

Mensagem de erro curl: (92) HTTP/2 stream 0 não foi fechado corretamente: PROTOCOL_ERROR (err 1), o conteúdo do erro é, visite o endereço repo1.maven.org/maven2/com/… , o download desta biblioteca é extremamente devagar, a solução:

$ git config --global http.version HTTP/1.1
复制代码

Projeto de inicialização

Verifique o ambiente de desenvolvimento

Bem, depois do trabalho acima, o projeto pode finalmente ser executado neste momento. Entre no diretório raiz do projeto e execute npx react-native doctoro comando para verificar se o ambiente de desenvolvimento IOS está satisfeito:

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
复制代码

Caso contrário, você pode reparar manualmente o ambiente de desenvolvimento de acordo com as dicas acima.

Se estiver satisfeito, execute npx react-native infopara gerar as informações do ambiente de desenvolvimento e confirme novamente

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
复制代码

Projeto de inicialização

Diretório raiz do projeto, execute o seguinte comando para iniciar o projeto iOS:

$ npx react-native run-ios
复制代码

Até agora, construímos com sucesso um ambiente de desenvolvimento React Native e executamos com sucesso um projeto React Native.

Resumir

Construir um ambiente de desenvolvimento é um ponto problemático no estágio inicial de um novo projeto, e o processo será mais complicado. Essa etapa dissuade muitos alunos que desejam desenvolver o React Native. Neste artigo, inclui principalmente oito etapas, envolvendo a instalação do Xcode, Homebrew, Node, Watchman, Ruby, Gem, Bundler, CocoaPods, configuração de espelho, solução de problemas de rede e como criar um novo projeto e iniciar o projeto.

Que problemas você encontrou durante o processo de construção do ambiente React Native? Você pode compartilhar sua solução com todos?