react-native搭建开发环境过程记录

主要参考:官网的教程 https://reactnative.cn/docs/environment-setup

环境介绍:macos + ios

  1. npm - 已装
  2. node18 - 已装,通过nvm进行版本控制
  3. Homebrew- 已装
  4. yarn - 已装
  5. ruby - macos系统自带的2.2版本。
  6. watchman - 正常安装
  7. Xcode - 正常安装和配置。(无法通过配置的脚本正常启动,遂手动拖到命令行或者在cursor中的命令行工具 来启动本地项目)
  8. cocoapods - 安装失败(原因:ruby版本太低。)
  9. 创建新项目。可以启动simulator 但是无法启动项目。原因:cocoapods安装失败。

遇到的几个难解决的大问题:

1. yarn ios 会报错: ?unexpected token

CLI: unexpected token '?'

参考:github的回答

原因:node版本过低。且ruby无法识别在当前文件夹通过nvm切换的高版本。

解决方案:

  • 方法1 nvm 设置18 版本为default (陈工)
  • 方法2 ios文件下.xcode.env + 同时还有配置一下nvm的path路径 (没成功)

2. cocoapods - 安装失败

接下来是如何安装cocoapods
参靠这个
注意:: 前8个步骤都是正常。

到第九步(最后一步了)

会一直报错:如下

bash 复制代码
ERROR:  While executing gem ... (Gem::Exception)
    OpenSSL is not available. Install OpenSSL and rebuild Ruby or use non-HTTPS

明明OpenSSL已经安装了。但是却提示不可获得。

原因分析:OpenSSL配置的环境变量不对。

经过在.zshrc等文件里OpenSSL配置仍旧不解决问题。

最后通过下文中的步骤4解决了。方法3没尝试不知道能不能解决。

问题核心在于 Ruby 未正确链接到 OpenSSL 库 ,且使用 sudo 时环境变量可能被重置。以下是分步解决方案:


1. 确认 OpenSSL 安装及路径

bash 复制代码
# 检查 Homebrew 安装的 OpenSSL 路径(确保已安装)
brew install openssl@3       # 若尚未安装
OPENSSL_PATH=$(brew --prefix openssl@3)
echo $OPENSSL_PATH           # 输出应为类似 /opt/homebrew/opt/openssl@3(Apple Silicon)或 /usr/local/opt/openssl@3(Intel)

2. 重新安装 Ruby 并链接 OpenSSL

使用 RVM 重新安装 Ruby:
bash 复制代码
# 卸载当前 Ruby 版本(可选)
rvm remove 3.3.6

# 安装时指定 OpenSSL 路径(替换为你的实际路径)
rvm install 3.3.6 --with-openssl-dir=$OPENSSL_PATH

# 设为默认
rvm use 3.3.6 --default
验证 Ruby 的 OpenSSL 链接:
bash 复制代码
ruby -ropenssl -e 'puts OpenSSL::OPENSSL_VERSION'
# 输出应为你安装的 OpenSSL 版本(如 OpenSSL 3.0.12)

3. 禁止使用 sudo 安装 Gem

RVM 管理的 Ruby 应在用户空间运行,使用 sudo 会导致环境变量失效。直接以当前用户安装:

bash 复制代码
# 清理旧安装(如果存在)
gem uninstall cocoapods

# 安装 CocoaPods(无需 sudo)
gem install cocoapods

4. 若必须使用 sudo(不推荐)

如果因权限问题必须使用 sudo,需手动传递 OpenSSL 环境变量:

bash 复制代码
# 临时设置环境变量
export PATH="$OPENSSL_PATH/bin:$PATH"
export LDFLAGS="-L$OPENSSL_PATH/lib"
export CPPFLAGS="-I$OPENSSL_PATH/include"

# 使用 sudo 安装并保留环境变量。 -E 含义:保留当前用户的环境变量。
sudo -E gem install cocoapods -n /usr/local/bin

5. 修复 PATH 冲突

确保 RVM 的路径在 PATH 中优先级最高:

bash 复制代码
# 编辑 shell 配置文件(Zsh/Bash)
nano ~/.zshrc   # 或 nano ~/.bash_profile

# 添加以下行到文件末尾
export PATH="$HOME/.rvm/bin:$PATH"
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"

# 重新加载配置
source ~/.zshrc  # 或 source ~/.bash_profile

6. 验证安装

bash 复制代码
# 检查 CocoaPods 路径
which pod       # 应输出 ~/.rvm/gems/ruby-3.3.6/bin/pod

# 检查 OpenSSL 链接是否正常
gem install openssl -v '2.2.1' --source 'https://rubygems.org/'  # 测试 OpenSSL 是否可用

完整流程示例(Apple Silicon Mac)

bash 复制代码
# 1. 安装 OpenSSL
brew install openssl@3
export OPENSSL_PATH=$(brew --prefix openssl@3)

# 2. 重新安装 Ruby
rvm reinstall 3.3.6 --with-openssl-dir=$OPENSSL_PATH
rvm use 3.3.6 --default

# 3. 修复 PATH
echo 'export PATH="$HOME/.rvm/bin:$PATH"' >> ~/.zshrc
echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"' >> ~/.zshrc
source ~/.zshrc

# 4. 安装 CocoaPods
gem install cocoapods
  1. \[\] 1个 和 2个的问题。
相关推荐
西安小哥25 分钟前
破局与重生:大厂前端如何借力 AI 转型“超级全栈“
前端·人工智能
sunly_1 小时前
TypeScript总结:16、面向对象速查
前端·javascript·typescript
MXN_小南学前端1 小时前
React超长文本域中实现“返回顶部”浮动按钮
前端·javascript·react.js
学习嵌入式的小周1 小时前
Notepad++8.8.7下载安装(附安装包)
前端·notepad++
gs801401 小时前
解构 Cordis:面向“时空可组合性”的 TypeScript 元框架深度剖析
前端·javascript·typescript
岁岁种桃花儿2 小时前
Vue核心语法第一篇:Vue是什么?
前端·javascript·vue.js
观无3 小时前
若依EasyExcel实现单元格合并
开发语言·前端·javascript
愚公搬代码3 小时前
【愚公系列】《Web应用安全》001-VMware的安装
前端·安全
xiaohaiAIgeo3 小时前
【2026年】HG/T 20656-2024化工暖通空调设计规范:新版标准的变化与影响
java·前端·javascript·科普知识
立少→万能汉编3 小时前
用“立少→超文本”写静态网页,标签<倍>
服务器·前端·javascript