React Native v0.78 更新

news2025/3/7 6:20:52

这个版本在 React Native 中引入了 React 19，并带来了一些重要的新功能，例如 Android 矢量图（Vector Drawables）的原生支持 以及 iOS 更好的 Brownfield 集成。

亮点

  • React 19 集成
  • 更小更快的发布节奏
  • 可选择在 Metro 中启用 JavaScript 日志
  • 新增对 Android XML Drawables 的支持
  • iOS 上的 ReactNativeFactory

🚀 这个版本为开发者带来了更好的性能、兼容性和开发体验！

React 19

React 19 现已在 React Native 上可用！

React 19 需要对你的应用进行更新，因为我们对 React 18 进行了一些改动。例如，我们移除了一些 API，如 propTypes，你需要调整你的应用以适配 React 的新版本。

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

迁移后，你将能够利用 React 的所有新功能，包括（但不限于）：

  • Actions：这些是使用异步转换（async transitions）的函数。异步转换会自动管理数据提交，包括处理 pending 状态、乐观更新（optimistic updates）、错误处理等。
  • useActionState：一个基于 Actions 构建的工具钩子。它接受一个函数，并返回一个封装后的 Action。当调用该 Action 时，它将返回 Action 的最新结果及其 pending 状态。
  • useOptimistic：一个新的 Hook，可以在异步请求进行时，简化乐观地展示更新后的最终状态。如果请求出错，React 会自动切换回之前的值。
  • use：一个全新的 API，允许在渲染时访问资源。你现在可以使用 use 读取 Promise 或 Context，React 会在它们解析后恢复渲染。
  • ref 作为 prop 传递：现在可以像普通 props 一样传递 ref。函数组件不再需要 forwardRef，你可以立即迁移你的组件。
  • 其他新特性

完整的新特性列表，请查看 React 19 发布博客。

React 编译器（React Compiler）

React Compiler 是一个构建时工具，旨在通过自动应用 记忆化（memoization） 来优化 React 应用。尽管开发者可以手动使用 useMemo、useCallback 和 React.memo 来防止不必要的重新计算，但也可能遗忘或误用这些优化。React Compiler 通过深入理解 JavaScript 和 React 规则，自动对组件和 Hook 内的值或值组进行记忆化优化。

在这个版本中，我们简化了在 React Native 应用中启用 React Compiler 的流程。在之前的版本中，你需要安装两个包（编译器及其运行时），然后配置 Babel 插件以在 Metro 中启用 React Compiler。

现在，你只需要安装编译器本身，并配置 Babel 插件即可。你可以按照我们的 分步指南 启用它。

如何验证编译器是否运行？

你可以打开 React Native DevTools，在组件检查器（Component Inspector）中，所有被记忆化的组件都会带有 Memo ✨ 标签。

了解更多

如果你想深入了解 React Compiler，这些资源可能会有所帮助：

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

更小更快的版本发布

我们正在更新 React Native 的发布流程，以便在 2025 年 更频繁地 推出稳定版本。

这将让你更容易更新 React Native 版本，因为我们会 减少重大变更（breaking changes）的数量。更快的发布周期也意味着，我们的内部 bug 修复将 更早 交付给你，你可以更快地受益于 React Native 最新的功能。

我们相信，这种新的发布模式将使整个 React Native 生态系统的开发者受益，因为更少的重大变更意味着更稳定的框架，让大家都能更加放心地依赖它。 🚀

可选启用 Metro 的 JavaScript 日志

我们新增了一个 可选配置，可以 恢复 Metro 开发服务器的 JavaScript 日志流。此前，在 React Native 0.77 版本 中，我们移除了对 Community CLI 用户 的支持。但由于用户反馈较多，并结合我们对替代方案的评估，我们决定在 0.78 版本中提供 可选恢复。

如何启用？

你可以使用 --client-logs 标志来恢复日志流：

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

此外，你还可以通过 npm 脚本 来简化命令调用。

未来计划

需要注意的是，Metro 的日志流功能仍计划在未来彻底移除，并且默认仍然是关闭的。不过，我们将提供更长的迁移周期，以便开发者适应这一变更。

此外，这一更新也会 回溯到即将发布的 0.77.1 版本，让 0.77 用户也能受益于这项改进。

新增对 Android XML Drawables 的支持

在 React Native 0.78 版本中，我们引入了一种全新的方式来加载 图标、插图和其他图形元素，即 作为 Android XML 资源加载。

这意味着你可以使用：

  • 矢量（Vector）Drawable 来显示任意缩放的矢量图，而不会丢失质量。
  • 形状（Shape）Drawable 来绘制基本的装饰性元素。

如何使用？

这项功能完全兼容你已经熟悉的 Image 组件。你可以像引用其他静态资源一样，在 source prop 中引用 XML 资源，例如：

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

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

为什么使用 XML Drawables？

相比传统的位图（Bitmap），使用 XML 资源具有以下优势：
✅ 减少应用体积，避免存储多个不同分辨率的图像文件。
✅ 更好的跨屏幕渲染效果，在不同 DPI 设备上都能清晰呈现。

🚀 这一改进将使你的 React Native 应用在 Android 上更加高效和灵活！

性能与质量

与其他图像类型一样，Android 的 XML 资源会在主线程之外加载和渲染，因此不会导致帧率下降。这意味着资源可能不会立即显示，但它不会阻塞用户输入，从而保持流畅的交互体验。

异步解码（Off-thread decoding） 在同时渲染多个图标时尤为重要。内部测试显示，使用 Android 矢量图（Vector Drawables） 可以显著提高应用的性能。

为什么使用矢量图？
✅ 无损质量——矢量图可以在任意缩放情况下保持清晰。
✅ 更小的 APK 文件——无需为不同屏幕密度包含多个位图文件。
✅ 内存优化——矢量图加载后会被缓存，因此相同的图标会 同时显示，无需重复解码。

使用 XML Drawables 的权衡

虽然 XML 资源 带来了性能优化，但也有一些限制：

1️⃣ 必须在构建时引用

  • 这些资源会在 构建步骤 中使用 Android 资源打包工具（AAPT） 预编译成二进制 XML。
  • Android 不支持直接加载原始 XML 文件，因此无法在运行时动态引用未编译的 XML 资源。

2️⃣ 不能通过 Metro 加载

  • XML 资源 无法通过网络加载。
  • 如果更改 目录 或 文件名，则必须重新编译 Android 应用。

3️⃣ 默认没有尺寸

  • 这些资源默认大小为 0×0，你 必须手动指定宽高 才能正常显示。

4️⃣ 运行时定制受限

  • 你只能动态控制 尺寸 或 整体颜色（tint color），但无法修改内部属性（如描边宽度、圆角、颜色等）。
  • 如果需要不同的样式变体，必须创建多个 XML 资源文件。

重要提示：XML Drawables ≠ react-native-svg

❌ Android 矢量图（Vector Drawables） 无法完全替代 react-native-svg。
✅ Vector Drawables 仅适用于 Android，而 react-native-svg 可在 iOS 和 Android 上通用。
🚀 如果你想在所有平台上保持一致的 SVG 体验，仍需使用 react-native-svg。

总结：XML Drawables 适用于 Android 平台，能够提升性能并减少 APK 体积，但在可定制性方面存在一定限制。开发者需要根据实际需求选择合适的方案！

ReactNativeFactory 在 iOS 上的改进

在 React Native 0.78 版本中，我们改进了 React Native 在 iOS 上的集成方式。

这次版本引入了一个新类 RCTReactNativeFactory，它允许你在 没有 AppDelegate 的情况下 创建 React Native 实例。这样，你可以在 ViewController 中创建 React Native 的新版本，极大简化了与 Brownfield 应用的集成。

用例场景：在 ViewController 中嵌入 React Native 视图

假设你希望在 iOS 应用的 ViewController 中展示一个 React Native 视图。从 React Native 0.78 开始，你只需按照以下步骤操作：

  1. 安装所有必要的依赖（参见官方指南）。
  2. 在你的 ViewController 中添加如下代码：
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? {
    self.bundleURL()
  }

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

代码说明

  • RCTReactNativeFactory: 该类用于在没有 AppDelegate 的情况下创建 React Native 实例。

  • ReactNativeDelegate: 该委托类重写了 sourceURL和 bundleURL方法，用来告知 React Native 应该从哪里加载 JS bundle。

  • sourceURL: 定义桥接的资源 URL。

  • bundleURL: 指定 JS bundle 的路径。

工作原理

当你导航到 ViewController 时，React Native 会自动加载到该视图中。这种方式允许你将 React Native 集成到现有的 iOS 应用中，尤其是与 Brownfield 应用（已有的 iOS 项目）集成时，能够显著简化流程。

总结：

React Native 0.78 引入的 RCTReactNativeFactory 类，使得在 iOS 的 ViewController 中嵌入 React Native 变得更加简单和灵活，特别适用于与现有应用的集成。

其他重大变更（Breaking Changes）

在 React Native 0.78 版本中，我们对多个部分进行了调整，包括 通用变更、React Native DevTools、代码生成、Android 和 iOS，其中一些改动可能会影响你的项目。

通用（General）

✅ React Native DevTools

  • 移除了 FuseboxClient CDP 域（可能影响依赖该功能的开发工具）。

✅ 代码生成（Codegen）

  • 组件数组类型（component array types）和 命令数组类型（command array types）已被分离。

Android 变更

✅ 可空性（Nullability）调整

  • RootView 迁移至 Kotlin导致某些参数类型从 可空（nullable）变为非空（non-nullable。这意味着，如果你的代码之前依赖某些可空类型，可能需要调整代码逻辑。

✅ 以下类已被移除或改为内部（internal）类，无法再被外部访问：

  • com.facebook.react.bridge.GuardedResultAsyncTask
  • com.facebook.react.uimanager.ComponentNameResolver
  • com.facebook.react.uimanager.FabricViewStateManager
  • com.facebook.react.views.text.frescosupport.FrescoBasedReactTextInlineImageViewManager

如果你的项目依赖这些类，你需要寻找替代方案或调整代码。

iOS 变更

✅ 图片加载事件的尺寸信息调整

  • Image 加载事件（Image Load Event） 的 尺寸信息 从 逻辑尺寸（logical size）调整为像素尺寸（pixel size）。
  • ⚠️ 仅影响旧架构（Old Architecture），使用 Fabric 新架构的应用不受影响。

总结

  • React Native DevTools 变更：移除了 FuseboxClient CDP。
  • 代码生成（Codegen）调整：组件数组类型与命令数组类型拆分。
  • Android 迁移至 Kotlin：某些 API 类型变更，并移除/隐藏了一些内部类。
  • iOS 旧架构的图片加载事件变更：单位从 逻辑尺寸 变为 像素尺寸。

建议开发者在升级前仔细检查项目依赖，确保不受这些 breaking changes 影响！ 🚀

升级到 React Native 0.78 🚀

如何升级现有项目？

请使用 React Native Upgrade Helper 来查看 不同版本之间的代码变更，并参考官方 升级文档 进行迁移。

如何创建新项目？

你可以使用以下命令创建一个 基于 React Native 0.78 的新项目：

npx @react-native-community/cli@latest init MyProject --version latest
Expo 支持情况

如果你使用 Expo，React Native 0.78 将在 Expo SDK 的 Canary 版本 中获得支持。请关注 Expo 的后续更新。

重要信息 ⚠️

  • React Native 0.78 现已成为 最新稳定版本。
  • React Native 0.75.x 版本已进入不受支持状态。
  • 官方计划发布 0.75 的最终更新，请尽快升级到 0.78 以获得最新的功能和支持。

📢 建议开发者尽早升级，以保持项目的安全性、稳定性和新功能支持！ 🚀

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2310913.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

记录Linux安装mysql8

记录Linux安装mysql8

1.mysql8安装 ​​​​​​​yum安装mysql8.0版本_yum 安装mysql8-CSDN博客文章浏览阅读833次&#xff0c;点赞10次&#xff0c;收藏9次。yum安装mysql8.0版本,如果系统中已经安装了旧版本的 MySQL 或者 mariadb&#xff0c;需要先卸载._yum 安装mysql8https://blog.csdn.net/…
阅读更多...
CodeBlocks个性化竞赛配置

CodeBlocks个性化竞赛配置

文章目录 1. 主题设置2. 设置默认代码3. 比赛时的使用 1. 主题设置 参考博客 --> codeblocks更改主题颜色及调试 跟随当前教程配置主题 博主使用的主题为son of obsidian&#xff0c;此主题为黑色背景&#xff0c;按照上边参考博文修改一下光标颜色即可。 效果图&#xff1…
阅读更多...
如何用单机版deepseek编写示例

如何用单机版deepseek编写示例

以下是一个简单的 DeepSeek 编程示例&#xff0c;通过 API 调用实现智能对话功能&#xff1a;文末有链接 一、环境准备 pip install requests # 安装 HTTP 请求库‌:ml-citation{ref"2" data"citationList"} 二、代码实现 import requests def chat_wi…
阅读更多...
python实现的可爱卸载动画

python实现的可爱卸载动画

在逛掘金时&#xff0c;掘金用户在B站看到的灵感进行的一个卸载窗口的动画效果的实用案例。人类是一种不断在学习的动物&#xff0c;并且是一种模仿能力学习能里比较强的动物。我这里是第三波的学习实践者咯&#xff01; 相对VUE构建动画效果窗口&#xff0c;我更加喜欢用pytho…
阅读更多...
钣金加工行业数字化转型MES方案

钣金加工行业数字化转型MES方案

一、 行业痛点&#xff1a;钣金加工行业普遍面临以下挑战&#xff1a; 订单多样化、小批量、定制化需求增多&#xff1a;传统生产模式难以适应快速变化的市场需求。 生产流程复杂、工序繁多&#xff1a;涉及切割、折弯、焊接、表面处理等多个环节&#xff0c;协同效率低。 生产…
阅读更多...
pinginfoview网络诊断工具中文版

pinginfoview网络诊断工具中文版

介绍 pinginfoview中文版本是一款实用的网络诊断工具&#xff0c;它专为中文用户设计&#xff0c;提供了方便易用的界面&#xff0c;使得在Windows环境下进行ping测试变得更加简单。该工具是由NirSoft开发的一款免费的桌面应用程序&#xff0c;尽管官方可能并未正式发布中文版…
阅读更多...
关于服务器无法下载kcv_encoder.h5权重的解决方法

关于服务器无法下载kcv_encoder.h5权重的解决方法

最近租服务器跑实验代码&#xff0c;在模型初次加载时会下载stable diffusion的一系列预训练权重&#xff0c;但服务器一直卡在 Downloading data from https://huggingface.co/fchollet/stable-diffusion/resolve/main/kcv_encoder.h5 &#xff0c;最后报错 File /usr/local/…
阅读更多...
计算光学成像与光学计算概论

计算光学成像与光学计算概论

计算光学成像所涉及研究的内容非常广泛&#xff0c;虽然计算光学成像的研究内容是发散的&#xff0c;但目的都是一致的&#xff1a;如何让相机记录到客观实物更丰富的信息&#xff0c;延伸并扩展人眼的视觉感知。总的来说&#xff0c;计算光学成像现阶段已经取得了很多令人振奋…
阅读更多...
Linux——Docker容器内MySQL密码忘记了如何查看

Linux——Docker容器内MySQL密码忘记了如何查看

目录 查看正在运行的MySQL的容器ID 方法一&#xff1a;查看MySQL容器的日志里的密码 方法二&#xff1a;通过环境变量密码登录 方法三&#xff1a;修改密码 查看正在运行的MySQL的容器ID docker ps 方法一&#xff1a;查看MySQL容器的日志里的密码 docker logs [MySQL的容器…
阅读更多...
Varjo XR-4 混合现实驾驶仿真解决方案

Varjo XR-4 混合现实驾驶仿真解决方案

企业级虚拟与混合现实解决方案提供商Varjo今日宣布&#xff0c;其XR-4系列设备已与VI-grade的车辆开发平台VI-WorldSim实现兼容。自2025.1版本起&#xff0c;VI-WorldSim将通过虚幻引擎5的OpenXR接口支持Varjo XR-4系列头显。 VI-WorldSim是一个集成式图形环境&#xff0c;可加…
阅读更多...
颠覆传统软件测试！Browser Use WebUI+DeepSeek：软件测试行业的革命性突破

颠覆传统软件测试！Browser Use WebUI+DeepSeek：软件测试行业的革命性突破

前置信息 硬件配置 处理器 : Intel(R) Core(TM) i5-8265U CPU 1.60GHz (四核 / 八逻辑处理器) 主板 : 20N8002UCD 内存 : 8GB(RMSA3260ME78HAF-2666 DDR4 2667 MT/s) 显示适配器 : Lexa PRO [Radeon 540/540X/550/550X / RX 540X/550/550X]/WhiskeyLake-U GT2 [UHD Graphics…
阅读更多...
中学学习难点管理思维魔方

中学学习难点管理思维魔方

中学学习难点管理思维魔方 点&#xff1a;识别难点 预习难点学习难点考试错漏 线 难题整理 导图笔记 集中训练 各个突破询问老师同学个人深入思考反复阅读练习 题目改型 举一反三一题多问一题多解 面&#xff1a;定期确认 导出难题&#xff0c;重新完成 体&#xf…
阅读更多...
使用开放数据、ArcGIS 和 Sklearn 测量洛杉矶的城市相似性

使用开放数据、ArcGIS 和 Sklearn 测量洛杉矶的城市相似性

城市规划人员希望找到具有相似城市结构&#xff08;街道网络、建筑结构、土地使用类型、人口密度&#xff09;和人口统计数据&#xff08;收入、文化、年龄&#xff09;的地方。在本文中&#xff0c;我将介绍我为量化邻里相似性而确定的方法和决策&#xff0c;并展示数据科学方…
阅读更多...
线上虚拟展厅有哪些应用场景？

线上虚拟展厅有哪些应用场景？

虚拟展厅利用数字技术和三维建模技术创建一个虚拟的展览环境&#xff0c;使参观者可以通过计算机、智能手机、平板电脑等设备远程参观展览。其应用场景十分广泛&#xff0c;具体来说包括以下几个方面&#xff1a; 艺术展览&#xff1a; 通过线上虚拟展厅&#xff0c;人们可以…
阅读更多...
[MySQL初阶]MySQL（5）内置函数详解

[MySQL初阶]MySQL（5）内置函数详解

标题&#xff1a;[MySQL初阶]MySQL&#xff08;5&#xff09;内置函数详解 水墨不写bug 文章目录 一、日期函数1. current_date()2. current_time()3. current_timestamp()4. date(datetime)5. date_add(date, interval expr unit)6. date_sub(date, interval expr unit)7. dat…
阅读更多...
EasyDSS视频推拉流/直播点播平台：Mysql数据库接口报错502处理方法

EasyDSS视频推拉流/直播点播平台：Mysql数据库接口报错502处理方法

视频推拉流/视频直播点播EasyDSS互联网直播平台支持一站式的上传、转码、直播、回放、嵌入、分享功能&#xff0c;具有多屏播放、自由组合、接口丰富等特点。平台可以为用户提供专业、稳定的直播推流、转码、分发和播放服务&#xff0c;全面满足超低延迟、超高画质、超大并发访…
阅读更多...
.NET 10首个预览版发布：重大改进与新特性概览！

.NET 10首个预览版发布：重大改进与新特性概览！

前言 .NET 团队于2025年2月25日发布博文&#xff0c;宣布推出 .NET 10 首个预览版更新&#xff0c;重点改进.NET Runtime、SDK、Libraries 、C#、ASP.NET Core、Blazor 和.NET MAUI 等。 .NET 10介绍 .NET 10 是 .NET 9 的后继版本&#xff0c;将作为长期支持维护 &#xff…
阅读更多...
【python】gunicorn配置

【python】gunicorn配置

起因&#xff1a;因为cpu利用率低导致我去缩容&#xff0c;虽然缩容之后cpu利用率上升维持在60%左右&#xff0c;但是程序响应耗时增加了。 解释&#xff1a;因为cpu干这件活本身不累&#xff0c;但在干这件活的时候不能去干其他事情&#xff0c;导致并发的请求不能及时响应&am…
阅读更多...
基于WebAssembly的云原生运行时：重新定义轻量化微服务架构

基于WebAssembly的云原生运行时：重新定义轻量化微服务架构

引言&#xff1a;颠覆性的运行时革命 Fastly边缘计算平台每天处理2000亿次Wasm请求&#xff0c;冷启动时间低于1ms。字节跳动采用Wasm实现广告算法热更新&#xff0c;发布耗时从分钟级降至秒级。CNCF 2024调研显示Wasm在边缘计算场景渗透率达42%&#xff0c;单实例内存开销仅为…
阅读更多...
25年社工考试报名时间⏰附报名全流程✅

25年社工考试报名时间⏰附报名全流程✅

目前&#xff0c;湖北、重庆、云南、天津、山西、内蒙、四川、北京八地已发布考务通知。 1、湖北&#xff1a;3月11日9:00—3月26日20:00 2、重庆&#xff1a;3月13日9:00—3月24日17:00 3️⃣云南&#xff1a;3月10日09:00—3月20日17:00 4、天津&#xff1a;3月10日0:00至…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023