React Native 0.76 - 默认启用新架构、React Native DevTools 以及更多功能

今天，我们很高兴地发布 React Native 0.76！

这是 React Native 的一个重要里程碑，因为我们默认启用了新架构，并且引入了 React Native DevTools。这是我们团队 6 年辛勤工作的结晶，也离不开我们令人难以置信的开发者社区的支持。

亮点

• React Native 新架构默认启用
• React Native DevTools
• 更快的 Metro 解析速度
• Box Shadow 和 Filter 样式属性

重大更改

• 删除了对 react-native-community/cli 的依赖
• 由于原生库合并，Android 应用体积缩小约 3.8MB
• 更新了最低 iOS 和 Android SDK 要求

亮点

React Native 新架构默认启用

从 React Native 0.76 开始，新架构将在您的项目中默认启用。新架构是对 React Native 内部结构的重写，旨在使应用开发者能够使用 React 开发高质量的原生应用。

今天，我们很高兴地宣布新架构已准备好投入生产使用。

此更改是 React Native 演变中的一个里程碑，我们邀请您阅读专门的博文，以了解新架构中包含的内容以及它将如何塑造 React Native 的未来：新架构已上线。

React Native DevTools

我们发布了 React Native DevTools 的第一个稳定版本，这是我们新的默认调试体验。

我们希望您用于跨所有平台调试 React 的工具能够可靠、熟悉、简单且一致。React Native DevTools 实现了这些原则——与 React Native 深度集成的、与浏览器对齐的开发者工具。主要功能包括

• 熟悉、与 Web 对齐的工具——基于 Chrome DevTools 的功能齐全的调试器，具有可靠的断点、监视值、单步调试、堆栈检查和丰富的 JavaScript 控制台。这些核心功能现在可以可靠地跨重新加载工作。
• 改进且集成的 React DevTools——内置的 React 组件检查器和分析器可以无缝地工作，组件高亮速度更快且更可靠。
• 改进的用户体验——查看新的“调试器暂停”覆盖层，清楚地显示您的应用何时在断点处暂停。LogBox 中的警告现在显示为摘要，并在附加 DevTools 时隐藏。
• 修复了重新连接行为——JavaScript 断点现在可以在重新加载以及 DevTools 断开连接和重新连接时可靠地工作。即使在原生重建后，DevTools 也可以重新连接到同一个应用。
• 即时启动——React Native DevTools 默认情况下即可使用，无需任何配置。您可以从应用内开发菜单或通过 j 在 CLI 服务器中打开它，该服务器现在支持多个模拟器和设备。

React Native DevTools 从根本上不同于我们以前的调试选项，包括不同于 0.73 中首次提供的实验性调试器体验。它切换到一个新的后端调试堆栈，我们在过去一年中对其进行了重建。这意味着与先前工具的兼容性已发生变化，并且您还应该期望获得端到端更可靠的体验。我们打算在此新堆栈上进行构建，以便我们将来能够可靠地实现更多功能，例如性能和网络面板。

逐步淘汰 Metro 中的日志

在我们的下一个版本中，我们将删除 Metro 中转发的日志，以与现代浏览器工具保持一致，并删除旧的调试集成。请改用 React Native DevTools 的功能齐全的控制台面板进行日志记录。请参阅我们的常见问题解答了解详细信息。

链接

• 更新的调试文档
• React Universe Conf 上的发布说明
• 反馈线程和常见问题解答

更快的 Metro 解析速度

我们对 Metro 的解析器（负责从导入路径查找模块的组件）进行了多项性能改进，使其速度提高了约15 倍。这提高了 Metro 的整体性能，尤其是在热构建方面，我们发现热构建速度提高了约 4 倍。

Box Shadow 和 Filter 样式属性

我们在 0.76 中添加了两个仅限新架构的样式属性 - boxShadow 和 filter。这两个属性都存在于 Web 中，并且团队在可能的情况下遵循规范，以便这些属性可预测、熟悉，并且最终更容易采用（有关例外情况，请参阅限制和规范偏差部分）。因此，您可以查找 Web 文档以充分了解它们的工作原理，但有一些重要的差异，如下所述。

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 上不起作用
• 无法 内嵌
• 没有 扩展
• 如果 View 没有背景颜色，则不起作用
• 是一个单独的属性，因此无法共享相同的 Web 语法

限制与规范偏差

• 默认阴影颜色为黑色，而不是父元素的颜色
• Android 普通阴影在 Android 9+ 上受支持
• Android 内嵌阴影在 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 不会应用于阴影、轮廓或元素边界之外的任何其他图形元素
• Android 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 中显式 添加对 CLI 的依赖项

//…
  “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 是必要的，并且 包含在升级助手 中。

除非您有自定义 C++ 代码，否则库作者不会受到此更改的影响。

有关此更改的技术深入探讨以及对库作者的建议，您可以在 专门的帖子 中了解更多信息。

更新 iOS 和 Android SDK 的最低要求

我们已更新了平台和 SDK 的最低版本

• iOS - 从 13.4 更新到 15.1
• Android - 从 SDK 23 更新到 SDK 24（Android 7）

此更改在今年早些时候发布 0.75 版本时 已宣布。有关更多背景信息，请参阅针对 Android 和 iOS 的专门帖子。

其他重大更改

• 动画
  • 停止在循环动画中向 React 发送状态更新。这会导致循环动画出现不必要的重新渲染。
• 开发者工具
  • 在新的架构下删除检查器面板性能和网络选项卡。（RFC）
• 文本引擎
  • 始终在 TextLayoutManager 中使用 AttributedStringBox 而不是 AttributedString

Android

• 渲染
  • View 背景不再是直接的 ReactViewBackgroundDrawable 或 CSSBackgroundDrawable

iOS

• TurboModule
  • 删除了用于自动链接纯 Cxx 模块的 RCT_EXPORT_CXX_MODULE_EXPERIMENTAL 宏。

鸣谢

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 升级助手 查看现有项目中 React Native 版本之间的代码更改，以及升级文档。

如果您使用 Expo，则 Expo SDK 52 将支持 React Native 0.76。

如果您需要使用 CLI 创建新项目，可以运行以下命令

npx @react-native-community/cli@latest init MyProject --version latest

信息

0.76 现在是 React Native 的最新稳定版本，0.73.x 将不再受支持。有关更多信息，请参阅 React Native 的支持策略。我们计划在不久的将来发布 0.73 的最终生命周期结束更新。