react native install cocoapods 附带搭建 rn 0.72 的完整过程

768 阅读8分钟

使用如下命令,初始化 react native 项目

npx react-native@0.72 init rndemo_02 --version 0.72.5

一定会出现 如下类似的错误,

✖ Installing CocoaPods dependencies (this may take a few minutes)

**error** NameError: uninitialized constant ActiveSupport::LoggerThreadSafeLevel::Logger


✖ Installing CocoaPods dependencies (this may take a few minutes)

**error** Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/environment-setup?os=macos&platform=android and follow the React Native CLI QuickStart guide for macOS and iOS.

**info** Run CLI with --verbose flag for more details.

参考了 stackoverflow 里面的部分建议,手动重新安装 cocoapods

参考了 解决CocoaPods安装卡住反应慢或失败 里面介绍的命令, 在网上找到个参数,可以查看安装进度,在最后加上-V

# 注意V是大写 

sudo gem install cocoapods -V

经历了非常漫长的时间,得到了如下结果。

ERROR:  Error installing cocoapods:

The last version of securerandom (>= 0.3) to support your Ruby & RubyGems was 0.3.2. Try installing it with `gem install securerandom -v 0.3.2` and then running the current command again

securerandom requires Ruby version >= 3.1.0. The current ruby version is 2.6.10.210

意思是说 ruby 版本太低了,我的系统是 Apple m3 pro macOS 15.3.2 (24D81) 。系统自带 ruby 版本 2.6.10.210 。

~ brew search ruby
==> Formulae
chruby                                   ruby-completion
chruby-fish                              ruby-install
cucumber-ruby                            ruby-lsp
imessage-ruby                            ruby@2.7
jruby                                    ruby@3.0
mruby                                    ruby@3.1
rbenv-bundler-ruby-version               ruby@3.2
ruby ✔                                   ruby@3.3
ruby-build                               rubyfmt

==> Casks
rubymine                                 rubymotion

所以手动安装 最新版 ruby, ruby@3.3

brew install ruby@3.3

安装完成后有如下提示,

==> ruby@3.3
By default, binaries installed by gem will be placed into:
  /opt/homebrew/lib/ruby/gems/3.3.0/bin

You may want to add this to your PATH.

ruby@3.3 is keg-only, which means it was not symlinked into /opt/homebrew,
because this is an alternate version of another formula.

If you need to have ruby@3.3 first in your PATH, run:
  echo 'export PATH="/opt/homebrew/opt/ruby@3.3/bin:$PATH"' >> ~/.zshrc

For compilers to find ruby@3.3 you may need to set:
  export LDFLAGS="-L/opt/homebrew/opt/ruby@3.3/lib"
  export CPPFLAGS="-I/opt/homebrew/opt/ruby@3.3/include"

执行这一条 终端命令, 使 ruby@3.3 为 优先使用的版本

echo 'export PATH="/opt/homebrew/opt/ruby@3.3/bin:$PATH"' >> ~/.zshrc

查看 gem 源地址

查看替换后的源地址

➜  ~ gem sources -l
*** CURRENT SOURCES ***

https://rubygems.org/

上面的经历可知 官方源 安装速度慢到让人崩溃, 替换源是最简单的方法

# 替换源
$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
# 查看替换后的源地址
$ gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

实操

➜  ~ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

https://gems.ruby-china.com/ added to sources
https://rubygems.org/ removed from sources
➜  ~ 
➜  ~ gem sources -l
*** CURRENT SOURCES ***

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

不放心 gem 版本,再看一眼。

➜  ~ sudo gem -v
Password:
3.6.3
➜  ~ gem -v
3.6.3

再次回到开头,感受一下 光速安装 cocoapods

sudo gem install cocoapods -V

再次初始化 react native 项目

npx react-native@0.72 init rndemo_01 --version 0.72.5

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing Ruby Gems
✖ Installing CocoaPods dependencies

其中,前面 4 个带对号的不走大概在 2 分钟左右完成, 估计有 npm 缓存的原因, 最后一个 Installing CocoaPods dependencies 执行了 3分钟以上,然后失败

[!] Error installing boost

Verification checksum was incorrect, expected f0397ba6e982c4450f27bf32a2a83292aba035b827a5623a14636ea583318c41, got 79e6d3f986444e5a80afbeccdaf2d1c1cf964baa8d766d20859d653a16c39848

✖ Installing CocoaPods dependencies (this may take a few minutes)

**error** Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/environment-setup?os=macos&platform=android and follow the React Native CLI QuickStart guide for macOS and iOS.

**info** Run CLI with --verbose flag for more details.

上面意思 安装 boost sum 验证不一致.

当我记录 这一过程时,2025年03月22日17:39:11,此时 react native 官网 最新版本是 0.78, 我为了学习 openharmony 大神,涂纯 的课, OpenHarmony 应用开发之ReactNative入门 的视频,里面用的是 0.72.5

ok, google 一下怎么解决,

stackoverflow.com/questions/7… github.com/boostorg/bo…

看 stack overflow 里面的记录似乎 react native 0.73 之前的版本 都有一定的概率遇到这个问题。

首先,找到 react native 项目的这个目录 node_modules/react-native/third-party-podspecs

image.png 注意这里

image.png 替换 https://boostorg.jfrog.io/artifactory/main/release/1.76.0/source/boost_1_76_0.tar.bz2https://archives.boost.io/release/1.76.0/source/boost_1_76_0.tar.bz2 注意,这两个地址,除了域名不同,路径也不同 域名: 一个是 https://boostorg.jfrog.io 另一个是 https://archives.boost.io 路径: 一个是 artifactory/main/release/1.76.0/source/boost_1_76_0.tar.bz2 另一个是 /release/1.76.0/source/boost_1_76_0.tar.bz2 注意,路径里面 release 路径之前的差异, 如果你遇到的问题里面的 boost 版本号和我的不一样,只需要注意路径的不同就行了。

修改后为

image.png

然后,回到 ios 目录,执行如下命令,应该就已经解决了 boost 的问题,所有的问题应该都解决了。

cd ios & pod install

Installing fmt (6.2.1)
Installing glog (0.3.5)
Installing hermes-engine (0.72.5)
Installing libevent (2.1.12)
Generating Pods project
Setting REACT_NATIVE build settings
Setting CLANG_CXX_LANGUAGE_STANDARD to c++17 on /Users/x/Desktop/rndemos/rndemo_02/ios/rndemo_02.xcodeproj
Pod install took 417 [s] to run
Integrating client project

[!] Please close any current Xcode sessions and use `rndemo_02.xcworkspace` for this project from now on.
Pod installation complete! There are 63 dependencies from the Podfile and 53 total pods installed.

回到项目根目录, 运行一下向项目。

cd ..
npm run start

当我觉得应该没有问题了的时候,问题又来了,

info Opening the app on iOS...
info Found Xcode workspace "rndemo_02.xcworkspace"
node:events:496
      throw er; // Unhandled 'error' event
      ^

Error: EMFILE: too many open files, watch
    at FSWatcher._handle.onchange (node:internal/fs/watchers:207:21)
Emitted 'error' event on NodeWatcher instance at:
    at FSWatcher._checkedEmitError (/Users/x/Desktop/rndemos/rndemo_02/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro-file-map/src/watchers/NodeWatcher.js:134:12)
    at FSWatcher.emit (node:events:518:28)
    at FSWatcher._handle.onchange (node:internal/fs/watchers:213:12) {
  errno: -24,
  syscall: 'watch',
  code: 'EMFILE',
  filename: null
}

查到这里 https://stackoverflow.com/questions/58675179/error-emfile-too-many-open-files-react-native-cli 提到 watchman watch-del-all

➜  rndemo_02 watchman watch-del-all 
{
    "version": "2025.03.10.00",
    "roots": []
}

然后再次

npm run start

此时打开了 ios 模拟器,然鹅, app 并没有在模拟器里面启动。 终端里面的输出好像在如下画面冻住了,没有办法了,重启电脑看看。

Explicit dependency on target 'React-RCTActionSheet' in project 'Pods'Explicit dependency on target 'React-RCTAnimation' in project 'Pods'Explicit dependency on target 'React-RCTAppDelegate' in project 'Pods'Explicit dependency on target 'React-RCTBlob' in project 'Pods'Explicit depe

过程进行到这里,感觉自己已经崩溃了,0.72.5 卡死在弹出来的终端那里,

就连尝试 0.78.1 也是 ios 代码在xcode 里面一堆的错误,再次放弃。

有人写了这样的文字,,,,, 其实无用

下面是 一些无价值的文字,

解决方法

  1. 执行 watchman watch-del-all
  2. 执行 rm node_modules 删掉依赖
  3. 重新装依赖,注意不要用npm,一定要用yarn install
  4. 执行 rm /tmp/metro-*
  5. 执行 npm run android 完美解决。

不要用npm install 个人感觉 rnnpm 不太友好,请使用yarn 安装你需要的模块

然鹅没有用

作者:来对鸡翅谢谢
链接:juejin.cn/post/684490…\

上面是 一些无价值的文字

这里看到里一个回复 github.com/facebook/re…


update 2025年03月23日16:10:46 因为是 react native 0.72, 对应的nodejs 请使用 v20.19.0 v20 lts. 版本,我使用的 v18 版本会卡主。


这些是一些可参考的基础知识

  1. cd ios to navigate to the ios folder.
  2. bundle install to install Bundler
  3. bundle exec pod install to install the iOS dependencies managed by CocoaPods.

github.com/facebook/re…

  1. Navigate to your project folder
  2. Run yarn install to make sure to pull in all the files required, especially if you updated the project
  3. Cd-ing into the ios folder
  4. run bundle exec pod deintegrate to cleanup the cocoapods and the projects.
  5. run bundle exec pod install to make sure the new scripts run properly.

下载 fmt 会 github 拉取代码

# 开启 git 代理:
git config --global http.proxy 'socks5://127.0.0.1:7890'
git config --global https.proxy 'socks5://127.0.0.1:7890'

# 取消 git 代理
git config --global --unset http.proxy
git config --global --unset https.proxy

到这一步,应该可以安装完所有的依赖, 但是当你运行 yarn ios 想要启动项目,你一定会遇到这个问题,

➜  rndemo yarn ios                                                                                 
yarn run v1.22.22
$ react-native run-ios
info Found Xcode workspace "rndemo.xcworkspace"
info Found booted iPhone
info Building (using "xcodebuild -workspace rndemo.xcworkspace -configuration Debug -scheme rndemo -destination id=00008140-0004656411F3001C")

info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor 

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 70. To debug build logs further, consider building your app with Xcode.app, by opening rndemo.xcworkspace.
Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace rndemo.xcworkspace -configuration Debug -scheme rndemo -destination id=00008140-0004656411F3001C

User defaults from command line:
    IDEPackageSupportUseBuiltinSCM = YES


2025-03-23 16:59:05.261 xcodebuild[56564:218762] Writing error result bundle to /var/folders/t6/gp74ywcd3yl56112cpsskdm00000gn/T/ResultBundle_2025-23-03_16-59-0005.xcresult
xcodebuild: error: Timed out waiting for all destinations matching the provided destination specifier to become available


        Ineligible destinations for the "rndemo" scheme:
                { platform:iOS, arch:arm64, id:00008140-0004656411F3001C, name:iPhone, error:Device is busy (Waiting to reconnect to iPhone) }

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

此时你的内心是崩溃的, 从数出来看,它让你用 xcode 打开项目 ,在项目根目录 xed -b ios ios 对应项目根目录 下的 ios 目录,这个命令会启动 xcode 打开 ios 对于第一次学习 react native 且无项目经验的人来说,进入 xcode ,这里 做了两件事,登录 apple id, 和修改 包名

image.png

第三件事解决代码报错的事情: 参考了这里 stackoverflow.com/questions/7…

会看到有这么一坨报错,

image.png 修复它你需要找到下图所示位置的文件

image.png

添加 #include <functional> 到如下图所示的位置

image.png

这个时候,已经解决 ios 使用 xcode 构建的所有错误,点击xcode 构建按钮

image.png 会弹出如下窗口,要求输入用户账号密码。 image.png

然后会看到这个画面

image.png

此时需要选择一下模拟器,

image.png 我选择了 iPhone se 的模拟器,你可以选择别的

image.png

然后就看到了结果

image.png

所以以后开发 react native 的正确姿势是这样的

    1. vscode 打开 rn 工程
    1. 在 vscode 终端里面在rn 工程根目录 运行 xed -b ios 使用 xcode 打开 ios 目录,选择模拟或者手机
    1. 点击构建按钮 会弹出如下窗口

image.png

按字母键 i 选择运行在 ios 里面。

    1. 在 vscode 修改 react native 源码文件,模拟器显示会立即刷新

image.png

直接 使用 yarn ios 并不能让你直接开发。过程太曲折和痛苦了,但是真的跑起来了,算是一个好的开始。

毕竟万事开头难。