React Native 0.78 -重大升级支持 React

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，允许在渲染时访问资源。你可以读取 Promise 或 Context，React 将在解析完成之前 Suspend（暂停渲染）。
• ref 作为 props：现在你可以像普通 props 一样传递 ref。函数组件不再需要 forwardRef，可以直接迁移。

---

React 编译器（React Compiler）

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

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

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

更多信息请参考：

• React Compiler 文档
• React Compiler 深入解析

---

更快、更稳定的版本发布

我们计划在 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 版本正式停止支持。