Xcode 14.3 React Native Yoga 构建失败解决

问题描述

升级到 Xcode 14.3 后，在构建包含 React Native 的项目时，您可能会遇到以下构建错误：

Use of bitwise '|' with boolean operands

该问题出现在 Yoga 文件中。Yoga 是 React Native 使用的布局引擎。错误发生的原因是旧版 Yoga 在布尔值上使用了位操作符 |（按位或），而 Xcode 14.3 增强了类型检查并禁止了这种不安全操作。

常见排查尝试（清除缓存、删除 node_modules/pods）通常无效，因为这是源代码级别的兼容性问题。

解决方案

✅ 最佳方案：升级 Yoga（推荐）

该问题在 Yoga v1.19.0（2021年5月21日发布）中已修复：

# 检查当前使用的 yoga 版本
grep 'yoga' package.json

# 尝试升级 react-native（可能包含更新的 yoga）
npm install react-native@latest

如果您的项目环境允许直接升级 React Native/Yoga，这是最稳妥的方案。

🔧 临时方案：手动修改操作符（快速测试）

1. 在 Xcode 中打开报错文件 Yoga.cpp（路径：react-native/ReactCommon/yoga/yoga/Yoga.cpp）
2. 定位错误行（通常与布尔表达式相关）
3. 将位操作符 | 替换为逻辑操作符 ||

// 修改前
bool condition = (value1 | value2);

// 修改后（正确）
bool condition = (value1 || value2);

4. 清理构建：Product > Clean Build Folder
5. 重新编译

注意

此修改在重新安装 node_modules 后会丢失，仅适合临时测试

🩹 持久方案：使用 patch-package 自动修补

1. 安装 patch-package：

npm install patch-package --save-dev

2. 在 package.json 中添加 postinstall 脚本：

"scripts": {
  "postinstall": "patch-package"
}

3. 修改本地 Yoga.cpp 文件（操作同临时方案）

4. 生成 React Native 补丁：

npx patch-package react-native

5. 提交生成的补丁文件到代码库：

patches/react-native+版本号.patch

工作原理

每次 npm install 后，patch-package 会自动应用补丁文件，无需手动修改

技术背景

此问题源于 C++ 编译器的严格性提升：

• 位运算符 (|) 操作整数类型
• 逻辑运算符 (||) 操作布尔类型
• Xcode 14.3 的 Clang 编译器新增布尔检查
• 问题早在 Yoga v1.19.0 已修复

总结解决方案

方案	适用场景	持久性
升级 React Native/Yoga	允许版本更新	✅ 永久
patch-package	需要锁版	✅ 持久
手动修改	紧急调试	❌ 临时

建议优先尝试升级 React Native 到包含 Yoga v1.19.0+ 的版本。若因项目限制无法升级，使用 patch-package 是最可靠的自定义解决方案。