React Native 0.76 - 默认新架构、React Native DevTools 等

2024年10月23日 ·12 分钟阅读

布莱克·弗里德曼

Meta 软件工程师

里卡多·西波列斯基

Meta 软件工程师

弗兰克·卡利斯

软件工程师 @ Infinite Red

加布里埃尔·多纳德尔·达尔阿诺尔

Expo 软件工程师

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

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

亮点

破坏性变更

亮点

React Native 新架构默认启用

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

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

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

React Native DevTools

React Native DevTools front-end

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

我们希望你用于在所有平台上调试 React 的工具是可靠、熟悉、简单和一致的。React Native DevTools 秉持这些原则——与浏览器对齐的开发工具，并与 React Native 深度集成。主要功能包括：

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

React Native DevTools 与我们之前的调试选项有着根本的不同，包括与 0.73 中首次发布的实验性调试器体验不同。它切换到我们过去一年重建的新后端调试堆栈。这意味着与之前工具的兼容性已改变，你也应该期待更可靠的端到端体验。我们打算在此新堆栈的基础上构建，以便未来能够可靠地实现更多功能，例如性能和网络面板。

Metro 中日志的淘汰

在我们的下一个版本中，我们将移除 Metro 中转发的日志，以与现代浏览器工具对齐，并移除旧的调试集成。取而代之的是，使用 React Native DevTools 功能齐全的控制台面板进行日志记录。有关更多信息，请参阅我们的常见问题。

链接

Metro 解析速度更快

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

Box Shadow 和 Filter 样式属性

我们在 0.76 中添加了两个仅适用于新架构的样式属性——boxShadow 和 filter。这两个属性都存在于 Web 上，团队尽可能遵循规范，以便这些属性可预测、熟悉，并且最终更易于采用（例外情况请参阅限制和规范偏差部分）。因此，你可以查阅 Web 文档以完全理解它们的工作方式，但下面列出了几个重要的区别。

`boxShadow`

boxShadow 为元素添加阴影，能够控制阴影的位置、颜色、大小和模糊度。请查看 MDN 文档，了解这些参数的完整概述，以及一个你可以亲自尝试的示例。下面是一些你可以创建的阴影示例。

New boxShadow style prop

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 文档，了解每个单独滤镜函数的完整概述，以及一个你可以亲自尝试的示例。下面是一张应用了各种滤镜的热狗图片。

与 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，因此带有 filter 的元素的子元素如果定位在父元素边界之外，将被剪裁。

重大更改

移除了对 @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

渲染
- 视图背景不再直接是 ReactViewBackgroundDrawable 或 CSSBackgroundDrawable

iOS

turbomodule
- 移除了用于自动链接纯 Cxx 模块的 RCT_EXPORT_CXX_MODULE_EXPERIMENTAL 宏。

致谢

React Native 0.76 包含来自 156 位贡献者的超过1070 次提交。感谢大家的辛勤工作！

感谢所有为本版本发布文章撰写文档的额外作者

乔·维尔奇斯和尼克·格尔曼的 box-shadow 和 filter 样式属性。
亚历克斯·亨特的 React Native DevTools。
尼古拉·科尔蒂的 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 的最终停产更新。

亮点​

破坏性变更​

亮点​

React Native 新架构默认启用​

React Native DevTools​

Metro 中日志的淘汰​

Metro 解析速度更快​

Box Shadow 和 Filter 样式属性​

boxShadow​

限制与规范偏差​

filter​

限制和规范偏差​

重大更改​

移除了对 @react-native-community/cli 的依赖​

Android 应用由于原生库合并而缩小了约 3.8Mb​

iOS 和 Android SDK 最低要求更新​

其他破坏性变更​

Android​

iOS​

致谢​

升级到 0.76​

亮点