React Native 0.76 - 默认启用新架构、React Native 开发者工具等
今天我们很高兴发布 React Native 0.76！
这是 React Native 的一个重要里程碑，因为我们默认启用了新架构，并推出了 React Native 开发者工具。这是我们团队经过 6 年努力工作，再加上我们出色的开发者社区支持的成果。
亮点
重大变更
亮点
默认启用 React Native 新架构
从 React Native 0.76 开始，您的项目默认启用新架构。新架构是对 React Native 内部进行的重写，使应用开发者能够使用 React 开发高质量原生应用。
今天，我们很高兴宣布新架构已准备好投入生产使用。
这一变更是 React Native 发展的一个重要里程碑，欢迎您阅读专门的博客文章，了解新架构的内容以及它将如何塑造 React Native 的未来：新架构来了。
React Native 开发者工具
我们发布了 React Native 开发者工具的第一个稳定版本，这是我们的默认调试体验。
我们希望您在所有平台调试 React 时使用的工具是可靠、熟悉、简单且统一的。React Native 开发者工具正是基于这些原则打造——与浏览器开发者工具保持一致，且深度集成到 React Native 中。主要功能包括：
- 熟悉、网页风格的工具 — 基于 Chrome DevTools 的全功能调试器，支持可靠的断点、变量观察、逐步调试、调用堆栈查看以及强大的 JavaScript 控制台。这些核心功能现在在重新加载后仍能稳定工作。
- 改进且集成的 React 开发者工具 — 内置的 React 组件检查器和性能分析工具运行更顺畅，组件高亮更快速可靠。
- 优化的用户体验 — 新增 调试器暂停 覆盖层，清晰显示应用何时停在断点。LogBox 中的警告以摘要形式显示，附加开发者工具时则隐藏。
- 修复的重连表现 — JavaScript 断点在重载和断开重连开发者工具后仍可稳定工作。开发者工具甚至能在原生重建后重新连接同一应用。
- 即开即用 — React Native 开发者工具默认启用，无需配置。您可以从应用内开发者菜单打开，或通过 j 键在 CLI 服务器中调试，该服务器现支持多台模拟器和设备。
React Native 开发者工具与我们之前的调试选项根本不同，也不同于在 0.73 版本中首发的实验性调试器。它切换到了我们过去一年重构的新后端调试堆栈。这意味着与先前工具的兼容性发生了变化，同时您也将获得端到端更加可靠的体验。我们计划基于此新堆栈稳定实现更多功能，如性能和网络面板。
逐步移除 Metro 中的日志转发
在下一版本中，我们将移除 Metro 中的日志转发，以与现代浏览器工具对齐，并移除旧的调试集成。取而代之的是请使用 React Native 开发者工具中的全功能控制台面板查看日志。更多信息请参见我们的常见问题。
相关链接
更快的 Metro 解析
我们对 Metro 的解析器做了多项性能优化，该组件负责根据导入路径查找模块，使解析速度提升了约 15 倍。这提升了 Metro 的整体性能，特别是在增量构建（warm build）时，速度提高了约 4 倍。
盒阴影和滤镜样式属性
我们在 0.76 中新增了两个仅限新架构的样式属性：boxShadow 和 filter。这两个属性均存在于网页端，团队尽可能遵守规范，使其表现可预期、熟悉且更易采用（有关例外，请参见限制与规范偏差章节）。
因此，您可以查阅网页文档全面了解其工作原理，但这里列出了一些重要差异。
boxShadow
boxShadow 可为元素添加阴影，允许控制阴影的位置、颜色、大小和模糊程度。查看 MDN 文档 了解各参数详细说明，并尝试示例。下图展示了几种阴影效果示例。
boxShadow 可以使用字符串（模仿 CSS 语法），也可以使用可嵌入变量的 JS 对象。例如，字符串 '5 5 5 0 rgba(255, 0, 0, 0.5)' 与对象 {offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: 'rgba(255, 0, 0, 0.5)'} 产生相同的盒阴影效果。
之前的阴影功能存在以下不足点，现由 boxShadow 改善：
限制与规范偏差
- 默认阴影颜色为黑色，而非继承自父组件颜色
- 安卓普通阴影仅支持 Android 9 及以上
- 安卓内阴影仅支持 Android 10 及以上
filter
filter 为元素添加特定图形滤镜，包含可修改亮度、饱和度、色调等的颜色滤镜，以及可添加模糊和阴影等非颜色滤镜。请查看 MDN 文档 获取各滤镜函数的详细说明及试用示例。下图演示了不同滤镜的效果。
saturate 滤镜，blur 滤镜，invert 滤镜和 boxShadow 类似，filter 可接受字符串（模仿 CSS 语法）或数组形式的 JS 对象。例如，字符串 'saturate(0.5) grayscale(0.25)' 与数组 [{saturate: 0.5}, {grayscale: 0.25}] 产生相同效果。
filter 中的 dropShadow 与 boxShadow 略有不同。最大的区别在于 dropShadow 作为 alpha 掩模，只有当像素的 alpha 通道非零时才会投影阴影，而 boxShadow 会环绕元素边界盒，即便内部没有绘制任何内容。此外，dropShadow 不支持扩散距离参数且不能为内阴影。
限制与规范偏差
- iOS 端
filter仅支持亮度和不透明度 - iOS 端
filter不作用于阴影、轮廓或元素边界外的其他图形 - 安卓端的
blur和drop-shadow仅支持 Android 12 及以上 filter隐含overflow: hidden，因此使用该属性的元素，超出父边界的子元素会被裁剪
重大变更
移除对 @react-native-community/cli 的依赖
此前在 0.75 版本中已说明，我们期望 React Native 框架无关。因此，我们完成了将 @react-native-community/cli 从 React Native 的直接依赖中移除的工作。
React Native 与 CLI 的解耦让我们能更快发布这些项目，且更好地划分它们的职责。
如果您的日常工作依赖 CLI，务必在 package.json 中显式添加依赖：
//…
“devDependencies”: {
// …
+ “@react-native-community/cli”: “15.0.0”,
+ "@react-native-community/cli-platform-android": “15.0.0”,
+ "@react-native-community/cli-platform-ios": “15.0.0”,
},
Android 应用减少约 3.8MB，得益于本地库合并
React Native 0.76 将合并众多本地代码至单一库 libreactnative.so，因此减少了本地库数量。
这一变更带来了应用体积的缩减，并提升了 Android 端应用启动性能。根据我们的基准测试，应用体积减少约 3.8MB（约占 20%），应用启动中位时间减少约 15ms（约 8%）（来源）。
不过，这对应用和库开发者来说是一个破坏性变更。
应用开发者需要如下更新其 Application 的 onCreate 方法：
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader
class MainApplication : Application(), ReactApplication {
override fun onCreate() {
super.onCreate()
+ SoLoader.init(this, OpenSourceMergedSoMapping)
- SoLoader.init(this, false)
}
}
该变更是为正确加载 libreactnative.so 必须进行的修改，并已包含在升级助手中。
除非您有自定义的 C++ 代码，否则库作者不会受此影响。
关于该变更的技术细节及给库开发者的建议，请阅读专门的讨论贴。
更新最低 iOS 和 Android SDK 要求
我们更新了平台和 SDK 的最低版本：
该变更在年初 0.75 发布时已预告。更多背景请查阅专门文章：Android 和 iOS。
其他破坏性变更
- 动画
- 停止在循环动画中向 React 发送状态更新，避免了循环动画中的不必要重渲染。
- 开发者工具
- 针对新架构移除检查器面板的性能和网络标签页。(RFC)
- 文本引擎
- 在 TextLayoutManager 中始终使用 AttributedStringBox 替代 AttributedString。
Android
- 渲染
- 视图背景不再直接为
ReactViewBackgroundDrawable或CSSBackgroundDrawable。
- 视图背景不再直接为
iOS
- TurboModule
- 移除了用于自动链接纯 C++ 模块的
RCT_EXPORT_CXX_MODULE_EXPERIMENTAL宏。
- 移除了用于自动链接纯 C++ 模块的
致谢
React Native 0.76 包含了来自 156 位贡献者的超过 1070 个提交。感谢大家的辛勤付出！
特别感谢在本次发布文档撰写中贡献内容的作者们：
- Joe Vilches 和 Nick Gerleman 盒阴影和滤镜样式属性
- Alex Hunt React Native 开发者工具
- Nicola Corti Android 单库发布
升级到 0.76
请使用 React Native 升级助手 来查看现有项目中 React Native 版本变化的代码修改细节，配合升级文档使用。
如果您使用 Expo，React Native 0.76 在 Expo SDK 52 中得到支持。
如果需要通过 CLI 创建新项目，可以运行以下命令：
npx @react-native-community/cli@latest init MyProject --version latest
0.76 已成为 React Native 的最新稳定版本，0.73.x 版本进入不再支持阶段。详情请查阅 React Native 支持政策。我们计划在近期发布 0.73 的最终终止更新。