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 ✨ 标签。
更多信息请参考:
更快、更稳定的版本发布
我们计划在 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 版本正式停止支持。