React Native 0.76 - 默认启用新架构、React Native DevTools 及更多
今天我们很高兴发布 React Native 0.76!
这对 React Native 来说是一个重要的里程碑,因为我们默认启用了新架构,并且我们正在引入 React Native DevTools。这是我们团队 6 年辛勤工作以及我们令人难以置信的开发者社区支持的结晶。
亮点
重大变更
亮点
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 组件检查器和 Profiler 无缝工作,组件高亮显示更快、更可靠。
- 改进的用户体验——查看新的在调试器中暂停叠加层,清楚地表明您的应用何时在断点处暂停。LogBox 中的警告现在显示为摘要,并在 DevTools 连接时隐藏。
- 修复了重新连接行为——JavaScript 断点现在可以在重新加载以及 DevTools 断开连接和重新连接时可靠地工作。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
。这两个属性都存在于 Web 上,并且团队尽可能遵守规范,以便这些属性是可预测的、熟悉的,并且最终更容易采用(有关例外情况,请参阅限制和规范偏差部分)。因此,您可以查阅 Web 文档以充分了解它们的工作原理,但有一些重要的差异如下所述。
boxShadow
boxShadow
为元素添加阴影,可以控制阴影的位置、颜色、大小和模糊度。查看 MDN 文档,全面了解每个参数,以及一个 fiddle 来亲自尝试。以下是一些您可以制作的阴影示例。
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 上不起作用
- 不能是 内阴影 (inset)
- 没有 扩展 (spread)
- 如果
View
没有背景颜色,则不起作用 - 是一个单独的属性,因此它不能共享相同的 Web 语法
限制和规范偏差
- 默认阴影颜色为黑色,而不是父元素的颜色
- Android 普通阴影在 Android 9+ 上受支持
- Android 内阴影在 Android 10+ 上受支持
filter
filter
为元素添加某些图形滤镜。有多种颜色滤镜,可让您修改亮度、饱和度和色调等,以及非颜色滤镜,可让您添加模糊和阴影。查看 MDN 文档,全面了解每个单独的滤镜函数,以及一个 fiddle 来亲自尝试。以下是一张热狗图片,应用了各种滤镜。

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
,因此具有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 是必要的,并且包含在 upgrade-helper 中。
库作者不会受到此更改的影响,除非您有自定义 C++ 代码。
有关此更改的技术深入探讨以及对库作者的建议,您可以在专门的文章中阅读更多内容。
更新了最低 iOS 和 Android SDK 要求
我们更新了最低平台和 SDK 版本
此更改已在今年早些时候 0.75 发布时宣布。有关更多背景信息,请参阅关于 Android 和 iOS 的专门文章。
其他重大变更
- 动画
- 停止在循环动画中向 React 发送状态更新。这导致了循环动画的不必要重新渲染。
- devtools
- 在新架构下移除 Inspector Panel 的 perf + network 标签。(RFC)
- 文本引擎
- 始终在 TextLayoutManager 中使用 AttributedStringBox 而不是 AttributedString
Android
- 渲染
- View 背景不再直接是
ReactViewBackgroundDrawable
或CSSBackgroundDrawable
- View 背景不再直接是
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 升级助手,除了升级文档外,还可以查看现有项目的 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 的最终停止支持更新。