今天，我们非常激动地发布了 React Native 0.76 版本！
这是 React Native 的一个重要里程碑，因为我们默认启用了新架构，并引入了 React Native DevTools。这是我们团队六年辛勤工作的成果，也得到了我们了不起的开发社区的支持。
亮点
- 默认启用 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 默认情况下无需配置即可使用。通过应用内 Dev 菜单或通过
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 上都存在，团队尽可能遵循规范，以便这些属性是可预测的、熟悉的，最终更容易采用（有关例外情况，请参见限制和规范偏差部分）。
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，所以如果元素的子元素定位在父元素边界之外，它们会被剪切
重大变更
正如之前在 0.75 版本中分享的，我们希望 React Native 能够与框架无关。因此，我们完成了从 React Native 中移除 @react-native-community/cli 作为直接依赖的工作。
将 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%），中位数应用启动时间将减少约 15ms（占总数的 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 发送状态更新。这会导致循环动画不必要的重新渲染。
- devtools:
- 在新架构下移除 Inspector Panel 性能 + 网络标签（RFC）
- 文本引擎
- 总是使用 AttributedStringBox 而不是 AttributedString 在 TextLayoutManager 中
Android
- 渲染：
- 视图背景不再直接是
ReactViewBackgroundDrawable或CSSBackgroundDrawable
- 视图背景不再直接是
iOS
- turbomodule
- 移除了
RCT_EXPORT_CXX_MODULE_EXPERIMENTAL宏用于自动链接纯 Cxx 模块。
- 移除了
升级到 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 的最终生命周期更新。
总结
React Native 0.76 版本是一个重要的更新，它默认启用了新架构，引入了 React Native DevTools，并带来了多项性能改进和新功能。这个版本标志着 React Native 六年来的发展成果，并且得到了开发者社区的大力支持。新架构的启用意味着开发者可以更高效地构建高质量的原生应用。此外，React Native DevTools 的引入提供了一个更可靠、熟悉且集成的调试体验。性能改进包括 Metro 分辨率的提升和新的样式属性，如 boxShadow 和 filter。这个版本还带来了一些重大变更，包括移除对某些 CLI 的依赖和更新最低 SDK 要求。最后，感谢所有为这个版本做出贡献的开发者。