React Native 0.76 - 默认启用新架构，React Native DevTools等新功能

react-native


今天我们很高兴发布 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 Native DevTools 实现了这些原则 —— 它是一款与 React Native 深度集成的浏览器风格的开发者工具。主要功能包括：

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

React Native DevTools 与我们之前的调试选项有根本的不同，包括与 0.73 首次推出的实验性调试器体验的不同。它切换到了一个全新的后端调试栈，这是我们在过去一年里重建的。这意味着与之前工具的兼容性有所变化，您应该会体验到更可靠的端到端调试体验。我们计划基于这个新栈构建更多功能，比如性能和网络面板。

逐步淘汰 Metro 日志

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

链接

更快的 Metro 解析

我们对 Metro 的解析器（负责从导入路径中查找模块的组件）进行了多项性能优化，使其速度提高了大约 15 倍。这显著提升了 Metro 的整体性能，特别是在增量构建（warm builds）时，速度提高了约 4 倍。

Box Shadow 和 Filter 样式属性

在 0.76 版本中，我们新增了两个仅在新架构中支持的样式属性 —— boxShadow 和 filter。这两个属性都在 Web 上存在，并且团队在可能的情况下坚持符合规范，使这些属性更为可预测、熟悉，并且最终更容易采用（有关例外情况，请参阅“限制和规范偏差”部分）。因此，您可以查阅 Web 文档，全面了解它们的工作方式，但仍有一些重要的差异需要注意。

boxShadow

boxShadow 为元素添加阴影，并可控制阴影的位置、颜色、大小和模糊度。您可以查阅 MDN 文档，全面了解每个参数的功能，并尝试自己动手操作。以下是一些您可以创建的阴影示例。

  • 新的 boxShadow 样式属性
    boxShadow 可以接受字符串格式（模仿 CSS 语法）或包含变量的 JavaScript 对象。例如，字符串 '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
  • 不能设置为内阴影（inset）
  • 没有扩展距离
  • 在没有背景色的视图上无法工作
  • 是单独的属性，因此无法与 Web 语法共享
限制与规范偏差
  • 默认的阴影颜色是黑色，而不是父元素的颜色
  • Android 常规阴影支持 Android 9 及以上版本
  • Android 内阴影支持 Android 10 及以上版本
filter

filter 为元素添加某些图形滤镜。它包括修改亮度、饱和度和色调的颜色滤镜，以及添加模糊和阴影等的非颜色滤镜。您可以查阅 MDN 文档，全面了解每个滤镜函数，并尝试自己操作。以下是一个应用了不同滤镜的热狗图片示例。

滤镜演示
从左到右：无滤镜，饱和滤镜，模糊滤镜，反转滤镜

与 boxShadow 类似，filter 可以接受字符串（模仿 CSS 语法）或包含变量的 JavaScript 对象数组。例如，字符串 '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 的模糊和投影阴影仅支持 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 的依赖：

1
2
3
4
5
"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%）。

另一方面，这对应用和库开发者来说是一次重大变化。

应用开发者需要按如下方式更新 Application 的 onCreate 方法：

1
2
3
4
5
6
7
8
9
10
import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader

class MainApplication : Application(), ReactApplication {

  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, OpenSourceMergedSoMapping)
  }
}

此更改对于正确加载 libreactnative.so 是必要的，并已包含在升级助手中。

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

有关此更改的技术深入解读，以及对库作者的建议，请阅读专门的文章。

最低 iOS 和 Android SDK 要求的更新

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

  • iOS：从 13.4 升级到 15.1
  • Android：从 SDK 23 升级到 SDK 24（Android 7）

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

其他重大变更

动画
  • 停止在循环动画中向 React 发送状态更新。这会导致循环动画的不必要重新渲染。
开发工具：
  • 在新架构中移除了 Inspector Panel 中的性能和网络标签。（RFC）
文本引擎
  • 在 TextLayoutManager 中始终使用 AttributedStringBox 代替 AttributedString。
Android
  • 渲染：视图背景不再直接是 ReactViewBackgroundDrawable 或 CSSBackgroundDrawable。
iOS
  • Turbo 模块：移除了用于自动链接纯 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 升级助手查看不同版本之间的代码变更，参考升级文档以帮助现有项目升级。

如果你使用 Expo，React Native 0.76 将在 Expo SDK 52 中得到支持。

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

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

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

涅槃快乐热爱生活，追求技术

个人简介。