React Native 0.77 版本发布:新特性、改进与迁移说明

2025 年 1 月 21 日,React Native 0.77 正式发布,此版本带来诸多新特性、对 Android 的支持增强、社区模板更新以及一些重要变更。

一、新特性亮点

(一)CSS 新特性助力布局、尺寸与混合效果

  1. display: contents 简化布局逻辑:该属性使元素自身在布局结构中“消失”,但子元素仍正常渲染,就像直接作为父元素的子元素一样。在构建需处理事件的包装组件或与 ShadowTree 交互场景中,可在不影响布局的前提下为子元素应用样式。例如,构建一个当内部组件被按下时弹出提示的包装组件,使用该属性可避免添加多余布局框,确保提示仅在目标子元素区域触发。
  2. boxSizing 精确控制元素尺寸计算:定义了元素尺寸属性(如 width、height 等)的计算方式,支持 border-box 和 content-box 两种值,默认值为 border-box。与网页默认值不同,此默认设置是为保证向后兼容性。如在设置了 padding 和 borderWidth 的 View 中,使用不同 boxSizing 值会使尺寸计算包含或不包含边框与内边距,开发者可据此灵活调整布局尺寸逻辑。
  3. mixBlendMode 与 isolation 实现元素颜色混合控制:mixBlendMode 属性允许元素在堆叠上下文中与其他元素混合颜色,其取值对应多种混合模式(如 multiply、screen 等),可实现丰富视觉效果。同时新增 isolation 属性,设置为 isolate 可使 View 形成独立堆叠上下文,防止具有 mixBlendMode 的子元素过度混合颜色,让开发者对颜色混合范围有更精细掌控。
  4. Outline props 突出元素轮廓:引入 outlineWidth、outlineStyle、outlineSpread 和 outlineColor 等轮廓属性,与 border 属性类似,但轮廓绘制在边框盒周围,可在不影响布局的情况下突出元素,为样式设计提供更多选择。

(二)Android 支持增强

  1. 适配 Android 15 强制边缘到边缘显示:在 targetSdk 为 35 构建应用时,Android 15 会强制应用全屏显示。若未妥善处理可能破坏 UI,使用 react-native-safe-area-context 库可自动适配此变化,开发者需关注并确保应用在新特性下正常显示。
  2. 支持 16KB 页面大小提升性能:Android 15 支持 16KB 内存页面大小,虽目前为可选功能,但 React Native 0.77 已准备好全面支持,开发者可在特定设备上测试并基于此发布应用,为未来设备兼容性和性能优化奠定基础。

二、社区 CLI 和模板更新

(一)社区 CLI 变更

  1. 弃用 react-native init 命令:此版本彻底弃用该命令,开发者可选择使用 Expo 的 npx create-expo-app 命令或通过 npx @react-native-community/cli init 直接调用社区 CLI 来创建新项目。
  2. 移除 Metro 中的快捷操作键:去掉了 Metro 中用于调用 run-android 和 run-ios 社区 CLI 命令的‘a’和‘i’键盘快捷键,因这些快捷键体验不佳且很少使用,同时认为框架更适合管理终端输出。

(二)社区模板更新

将 iOS 应用的社区模板编程语言从 Objective-C 迁移到 Swift,用单个 AppDelegate.swift 文件替换了原来的 main.m、AppDelegate.h 和 AppDelegate.mm 文件。但仍支持 Objective-C++ 变体,新项目默认使用 Swift,开发者也可按需迁移回 Objective-C。需注意,若应用有 C++ 编写的本地模块,因 Swift 与 C++ 互操作性尚不成熟稳定,暂无法在 Swift 中注册,此类应用应避免迁移 AppDelegate 到 Swift。

三、重大变更

(一)移除 Metro 中的 console.log() 流

为提升调试可靠性并匹配现代浏览器工具功能,移除了通过 Metro 的日志转发功能(0.76 版本已弃用),转向仅使用 Chrome DevTools Protocol (CDP)。开发者可使用 React Native DevTools 的控制台面板查看 JS 日志,也可通过第三方扩展(如 Expo Tools、Radon IDE)将 VS Code 连接为 CDP 调试器,但 React 团队暂不直接支持这些集成,正在开发第一方 VS Code 支持功能,同时 Expo CLI 仍提供日志流功能。

(二)其他变更

  1. 动画方面:原生循环动画在循环结束时不再发送 React 状态更新。
  2. 布局方面:ScrollView 中粘性头部的 position 会被正确考虑,绝对定位行为更合规。
  3. JS 模块方面:移除 ReactFabricInternals 模块。
  4. 原生模块方面:NativeModules 对象可用于在 JS 中加载 turbomodules,增强了与 Turbo Native Modules 的兼容性。
  5. 包方面:dev-middleware 要求框架指定相对于中间件主机的 serverBaseUrl。
  6. API 变更方面:从 AppRegistry 中移除 useConcurrentRoot 类型,从 NativeMethods TypeScript 定义中移除 refs 属性。
  7. UX 变更方面:从开发服务器关键命令中移除“run on iOS”和“run on Android”。
  8. Android 特定变更:基于 Kotlin 2.0.21 构建,部分 API 进行了空值处理、重命名或移除限制访问等操作,如调整 ReadableArray 非原始类型 getter 为可选、重命名 DevSupportManagerBase.getCurrentContext 等,同时一些内部包和类不再可访问。
  9. iOS 特定变更:移除 RCTConstants.RCTGetMemoryPressureUnloadLevel 等多个 API,替换 UseTurboModuleInteropForAllTurboModules 为合适功能标志,将部分 CGColorRef 使用替换为 UIColor,RCTAppDelegate 加载第三方依赖需使用 RCTDependencyProvider,CocoaPods 设置第三方依赖 C++ 版本避免编译问题。

四、React 19 支持计划

React 19 已于 2024 年 12 月 6 日发布,但 React Native 0.77 分支已确定无法引入,将在 React Native 0.78 版本中集成。开发者可使用 npx @react-native-community/cli init YourReact19App --version 0.78.0-rc.0 命令创建基于 React 19 的新应用进行尝试。

五、升级指南

对于现有项目,可使用 React Native Upgrade Helper 结合升级文档查看版本间代码变更。创建新项目可使用 npx @react-native-community/cli@latest init MyProject --version latest 命令。Expo 用户需关注 Expo SDK 52 对 React Native 0.77 的支持(具体更新说明将在 Expo 博客发布)。目前 0.77 为最新稳定版,0.74.x 已停止支持,React Native 团队计划近期发布 0.74 的最终停止更新说明。

此版本众多新特性和改进为 React Native 应用开发带来更多功能与性能提升机会,开发者需根据项目情况妥善处理变更和升级事宜。


似水流年
228 声望19 粉丝

编程开发工作者