React Native 0.76 - 默认启用新架构、React Native DevTools 及更多更新
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
今天我们激动地宣布 React Native 0.76 正式发布！
这是 React Native 发展的重要里程碑——我们不仅默认启用了新架构（New Architecture），还推出了 React Native DevTools。这凝聚了我们团队六年的不懈努力，以及开发者社区的大力支持。
重点更新
重大变更
重点详解
React Native 新架构默认启用
自 React Native 0.76 起，新架构将在新项目中默认启用。新架构是对 React Native 内部机制的重构，旨在帮助开发者用 React 构建高质量的原生应用。
我们在此郑重宣布：新架构已具备生产环境使用条件。
这是 React Native 演进史上的里程碑，欢迎阅读专题博客了解新架构的详细内容及其对未来发展的影响：新架构正式发布。
React Native DevTools
我们正式发布 React Native DevTools 的首个稳定版本——全新的默认调试解决方案。
我们致力于提供跨平台调试 React 应用的可靠、易用、统一工具链。React Native DevTools 践行这一理念，提供与浏览器工具深度整合的调试体验，核心特性包括：
-
熟悉的 Web 开发工具链 - 基于 Chrome DevTools 的全功能调试器，支持断点、变量监控、单步调试、调用栈检查和强大的 JavaScript 控制台。这些核心功能现可稳定运行并支持热重载。
-
增强的集成式 React DevTools - 内置组件检查器（Components Inspector）和分析器（Profiler）无缝协作，组件高亮更快速可靠。
-
用户体验优化 - 新增「调试暂停中」（Paused in Debugger）覆盖层，清晰提示应用暂停状态；LogBox 警告信息将以摘要形式显示，并在 DevTools 连接时自动隐藏。
-
修复重连行为 — JavaScript 断点现在能在重载、断开重连时可靠工作。DevTools 甚至能在原生重建后重新连接到同一应用。
-
即时启动 — React Native DevTools 默认零配置即可使用。通过应用内开发菜单或 j 快捷键打开，CLI 服务器现已支持多模拟器/设备同时调试。
React Native DevTools 与以往调试方案有根本区别，也与 0.73 版首次推出的实验性调试器不同。它采用我们耗时一年重建的全新后端调试架构，这意味着与旧版工具的兼容性有所变化，但您将获得端到端更可靠的体验。我们将基于此架构持续构建新功能，例如性能面板和网络面板。
逐步淘汰 Metro 日志
下个版本中，我们将移除 Metro 转发的日志以对齐现代浏览器工具链，并淘汰旧版调试集成。请改用 React Native DevTools 功能完备的控制台面板进行日志记录。详见常见问题解答。
相关链接
更快的 Metro 解析
我们对 Metro 解析器进行了多项性能优化，这个负责从导入路径查找模块的组件速度提升约 15 倍。这显著提升了 Metro 整体性能，其中热构建速度提升约 4 倍。
Box Shadow 与 Filter 样式属性
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 普通阴影需 Android 9+ 支持
-
Android 内阴影需 Android 10+ 支持
filter
filter 可为元素添加图形滤镜效果，包含调整亮度、饱和度和色调等色彩滤镜，以及添加模糊和阴影的非色彩滤镜。完整滤镜函数列表请参考 MDN 文档，您可通过交互示例亲自体验。下图展示了应用多种滤镜的热狗图片效果。
saturate filter, blur filter, invert filter与 boxShadow 类似，filter 属性既支持字符串格式（模拟 CSS 语法），也支持由可嵌入变量的 JS 对象构成的数组。例如，字符串 ‘saturate(0.5) grayscale(0.25)’ 与数组 [{saturate: 0.5}, {grayscale: 0.25}] 会产生相同的滤镜效果。
filter 中的 dropShadow 值与 boxShadow 存在细微差异：最核心的区别在于 dropShadow 采用 Alpha 遮罩机制——仅当像素的 Alpha 分量非零时才会投射阴影。而 boxShadow 则会在元素的边框盒（border box）周围投射阴影，即使元素内部为空。此外，dropShadow 不支持扩散距离参数，也无法设置为内阴影（inset）效果。
限制与规范差异
-
iOS
filter仅支持亮度和不透明度 -
iOS
filter不作用于元素边界外的阴影、轮廓等图形元素 -
Android 的
blur和drop-shadow需 Android 12+ 支持 -
filter会隐式启用overflow: hidden，因此具有filter的元素的子元素在定位超出父容器边界时将被裁剪
重大变更
移除对 @react-native-community/cli 的依赖
正如我们在 0.75 版本中提到的，我们的愿景是让 React Native 成为框架无关的框架。因此，我们完成了移除 @react-native-community/cli 这一直接依赖项的工作。
解耦 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%），应用中位启动时间将减少约 15 毫秒（约 8%）（来源）。
另一方面，这对应用和库开发者来说都是一项破坏性变更。
应用开发者需要按以下方式更新应用的 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 所必需的，且已包含在升级助手（Upgrade Helper）中。
库作者不会受到此变更的影响，除非你拥有自定义 C++ 代码。
要深入了解这一变更的技术细节以及给库作者的建议，可阅读这篇专题文章。
最低 iOS 和 Android SDK 要求更新
我们更新了最低平台和 SDK 版本要求：
这一变更已在今年 0.75 版本发布时提前宣布。更多背景信息，请参阅针对 Android 和 iOS 的专题文章。
其他破坏性变更
-
动画（Animation）
- 停止在循环动画中向 React 发送状态更新。这曾导致循环动画出现不必要的重新渲染。
-
开发者工具（devtools）:
- 在新架构下移除检查器面板（Inspector Panel）的性能和网络标签页。（RFC）
-
文本引擎（text engine）
- 在 TextLayoutManager 中始终使用 AttributedStringBox 替代 AttributedString
Android 平台变更
- 渲染（rendering）:
- 视图背景不再直接使用
ReactViewBackgroundDrawable或CSSBackgroundDrawable
- 视图背景不再直接使用
iOS 平台变更
- TurboModule
- 移除了用于自动链接纯 Cxx 模块的
RCT_EXPORT_CXX_MODULE_EXPERIMENTAL宏。
- 移除了用于自动链接纯 Cxx 模块的
致谢
React Native 0.76 包含了来自 156 位贡献者的 1070 多次提交。感谢大家的辛勤工作！
特别感谢为本版本发布文档撰写功能说明的各位作者：
-
Joe Vilches 和 Nick Gerleman 撰写了 box-shadow 和 filter 样式属性相关内容。
-
Alex Hunt 撰写了 React Native DevTools 相关内容。
-
Nicola Corti 撰写了 Android 以单一库发布相关内容。
升级至 0.76
对于现有项目，除了升级文档外，请使用 React Native Upgrade Helper 查看 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 版本的最终终止支持更新。