React Native 0.78 -重大升级支持 React 19

React 19

React 19 现已在 React Native 中可用!

由于我们在 React 18 的基础上进行了一些改动,升级至 React 19 需要对你的应用进行更新。例如,我们移除了一些 API(如 propTypes),因此你需要调整你的应用以兼容新版 React。

请按照我们的逐步指南将你的应用升级到 React 19。

升级后,你可以使用 React 的所有新功能,包括但不限于:

  • Actions:这些是使用异步转换的函数。异步转换会自动管理数据提交,包括处理等待状态、乐观更新、错误处理等。
  • useActionState:一个基于 Actions 的实用 Hook。它接受一个函数并返回一个封装后的 Action,在调用 Action 时会返回最后的结果及其等待状态。
  • useOptimistic:一个新的 Hook,可以在异步请求进行时乐观地显示最终状态。如果请求失败,React 会自动回退到之前的值。
  • use:一个新 API,允许在渲染时访问资源。你可以读取 PromiseContext,React 将在解析完成之前 Suspend(暂停渲染)。
  • ref 作为 props:现在你可以像普通 props 一样传递 ref。函数组件不再需要 forwardRef,可以直接迁移。

React 编译器(React Compiler)

React Compiler 是一个构建时优化工具,它可以自动对 React 应用进行 记忆化(memoization) 处理。通常,开发者可以手动使用 useMemouseCallbackReact.memo 进行优化,但容易忘记或误用。React Compiler 通过分析 JavaScript 代码和 React 规则,自动在组件和 Hooks 内部进行优化。

在本次更新中,我们简化了在 React Native 中启用 React Compiler 的流程。之前,开发者需要安装两个包(编译器和运行时),并手动配置 Babel 插件。现在,你只需安装编译器本身并配置 Babel 插件即可。

要检查编译器是否生效,可以打开 React Native DevTools,被记忆化的组件将在组件检查器中带有 Memo ✨ 标签

更多信息请参考:


更快、更稳定的版本发布

我们计划在 2025 年加快 React Native 的稳定版本发布频率。

  • 减少破坏性变更,让升级更简单。
  • 更快发布修复补丁,让开发者能更早使用最新功能。
  • 提高框架稳定性,减少 API 变动带来的影响。

这将为整个 React Native 生态带来更好的开发体验。


Metro 支持 JavaScript 日志回溯(Opt-in)

在 0.77 版本中,我们移除了 Metro 开发服务器的 JavaScript 日志回溯功能,但根据社区反馈,我们在 0.78 中重新引入了该功能,作为 可选项

你可以使用 --client-logs 选项启用它,例如:

npx @react-native-community/cli start --client-logs

请注意,这一功能未来仍计划移除,目前默认处于关闭状态。


新增支持 Android XML Drawable

React Native 0.78 允许在 Android 上加载 XML 矢量资源(如图标、插图等),以提供更优的渲染效果和更小的应用体积。

现在,你可以通过 Image 组件直接加载 .xml 资源:

<Image source={require('./img/my_icon.xml')} style={{ width: 40, height: 40 }} />

或使用 import 方式:

import MyIcon from './img/my_icon.xml';
<Image source={MyIcon} style={{ width: 40, height: 40 }} />

优势:

  • 更小的 APK 体积:不需要为每种屏幕密度提供不同的位图资源。
  • 更好的性能:矢量图形在不同分辨率下保持清晰,避免模糊或失真。
  • 非主线程渲染:避免主线程阻塞,提高流畅度。

注意事项:

  • XML 资源必须在构建时打包,无法在运行时动态加载。
  • 不能通过网络加载 XML 资源。
  • 需要手动指定宽高,否则不会显示。
  • 仅适用于 Android,iOS 仍需使用 react-native-svg 处理矢量图。

iOS 新增 ReactNativeFactory

React Native 0.78 在 iOS 端引入了 RCTReactNativeFactory,使其无需 AppDelegate 即可创建 React Native 实例,简化了 Brownfield(混合应用) 的集成。

现在,你可以在 ViewController 中直接加载 React Native 视图:

import React
import React_RCTAppDelegate

public class ViewController {
  var reactNativeFactory: RCTReactNativeFactory?
  var reactNativeDelegate: ReactNativeDelegate?

  public func viewDidLoad() {
    super.viewDidLoad()
    
    reactNativeDelegate = ReactNativeDelegate()
    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeDelegate!)
    view = reactNativeFactory?.rootViewFactory.view(withModuleName: "<your module name>")
  }
}

class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
  override func sourceURL(for bridge: RCTBridge) -> URL? {
    return self.bundleURL()
  }

  override func bundleURL() -> URL? {
    #if DEBUG
    return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
    #else
    return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
    #endif
  }
}

这样,React Native 视图将在用户进入 ViewController 时自动加载。


其他重大变更

通用更新

  • React Native DevTools:移除了 FuseboxClient CDP 相关功能。
  • 代码生成(Codegen):组件数组类型和命令数组类型被拆分。

Android 变更

  • RootView 迁移至 Kotlin,部分参数从 可空类型 变为 非空类型
  • 以下类被移除或设为内部类,无法再访问:
    • com.facebook.react.bridge.GuardedResultAsyncTask
    • com.facebook.react.uimanager.ComponentNameResolver
    • com.facebook.react.uimanager.FabricViewStateManager
    • com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageViewManager

iOS 变更

  • 图片加载事件的尺寸信息从逻辑尺寸改为像素尺寸(仅影响旧架构)。

升级至 0.78

请使用 React Native Upgrade Helper 查看代码变更。

创建新项目:

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

如果你使用 Expo,React Native 0.78 将在 Expo SDK 的 canary 版本 中支持。

🚀 React Native 0.78 现已成为最新稳定版本,0.75.x 版本正式停止支持。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容