React Native v0.78 更新

這個版本在 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
<Imagesource={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_RCTAppDelegatepublic 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 DEBUGreturn RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")#elsereturn 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.pswp.cn/web/71420.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/71420.shtml
英文地址，請注明出處：http://en.pswp.cn/web/71420.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

機器學習數學通關指南

機器學習數學通關指南

? 寫在前面 &#x1f4a1; 在代碼的世界里沉浸了十余載&#xff0c;我一直自詡邏輯思維敏捷&#xff0c;編程能力不俗。然而&#xff0c;當我初次接觸 DeepSeek-R1 并領略其清晰、系統的思考過程時&#xff0c;我不禁為之震撼。那一刻&#xff0c;我深刻意識到&#xff1a;在A…
閱讀更多...
MySQL 實驗1：Windows 環境下 MySQL5.5 安裝與配置

MySQL 實驗1：Windows 環境下 MySQL5.5 安裝與配置

MySQL 實驗1&#xff1a;Windows 環境下 MySQL5.5 安裝與配置 目錄 MySQL 實驗1&#xff1a;Windows 環境下 MySQL5.5 安裝與配置 一、MySQL 軟件的下載二、安裝 MySQL三、配置 MySQL 1、配置環境變量2、安裝并啟動 MySQL 服務3、設置 MySQL 字符集4、為 root 用戶設置登錄密…
閱讀更多...
煙花燃放安全管控：智能分析網關V4煙火檢測技術保障安全

煙花燃放安全管控：智能分析網關V4煙火檢測技術保障安全

一、方案背景 在中國諸多傳統節日的繽紛畫卷中&#xff0c;煙花盛放、燒紙祭祀承載著人們的深厚情感。一方面&#xff0c;煙花璀璨&#xff0c;是對節日歡慶氛圍的熱烈烘托&#xff0c;寄托著大家對美好生活的向往與期許&#xff1b;另一方面&#xff0c;裊裊青煙、點點燭光&a…
閱讀更多...
Elasticsearch：解鎖深度匹配，運用Elasticsearch DSL構建閃電般的高效模糊搜索體驗

Elasticsearch：解鎖深度匹配，運用Elasticsearch DSL構建閃電般的高效模糊搜索體驗

目錄 Elasticsearch查詢分類 葉子查詢 全文檢索查詢 match查詢 multi_match查詢 精確查詢 term查詢 range查詢 復雜查詢 bool查詢簡單應用 bool查詢實現排序和分頁 bool查詢實現高亮 場景分析 問題思考 解決方案 search_after方案(推薦) point in time方案 方案…
閱讀更多...
數據安全VS創作自由：ChatGPT與國產AI工具隱私管理對比——論文黨程序員必看的避坑指南

數據安全VS創作自由：ChatGPT與國產AI工具隱私管理對比——論文黨程序員必看的避坑指南

文章目錄 數據安全VS創作自由&#xff1a;ChatGPT與國產AI工具隱私管理對比——論文黨程序員必看的避坑指南ChatGPTKimi騰訊元寶DeepSeek 數據安全VS創作自由&#xff1a;ChatGPT與國產AI工具隱私管理對比——論文黨程序員必看的避坑指南 產品隱私設置操作路徑隱私協議ChatGPT…
閱讀更多...
FFmpeg入門：最簡單的音視頻播放器

FFmpeg入門：最簡單的音視頻播放器

FFmpeg入門&#xff1a;最簡單的音視頻播放器 前兩章&#xff0c;我們已經了解了分別如何構建一個簡單和音頻播放器和視頻播放器。 FFmpeg入門&#xff1a;最簡單的音頻播放器 FFmpeg入門&#xff1a;最簡單的視頻播放器 本章我們將結合上述兩章的知識&#xff0c;看看如何融…
閱讀更多...
windows 上刪除 node_modules

windows 上刪除 node_modules

在 Windows 11 上&#xff0c;你可以通過命令行來刪除 node_modules 文件夾并清除 npm 緩存。以下是具體步驟&#xff1a; 刪除 node_modules 打開命令提示符&#xff08;Command Prompt&#xff09;或終端&#xff08;PowerShell&#xff09;。 導航到項目目錄。你可以使用 …
閱讀更多...
kotlin的val聲明的變量是常量嗎

kotlin的val聲明的變量是常量嗎

kotlin的val聲明的變量是常量嗎 DeepSeek R1 思考 65 秒 思考過程 嗯&#xff0c;用戶問的是Kotlin中的val聲明的變量是不是常量。首先我需要回憶一下Kotlin的基礎知識。記得在Kotlin里&#xff0c;val用來聲明只讀變量&#xff0c;也就是說一旦賦值之后就不能再重新賦值了。…
閱讀更多...
Linux下學【MySQL】中如何實現：多表查詢（配sql+實操圖+案例鞏固 通俗易懂版~）

Linux下學【MySQL】中如何實現：多表查詢（配sql+實操圖+案例鞏固 通俗易懂版~）

每日激勵&#xff1a;“不設限和自我肯定的心態&#xff1a;I can do all things。 — Stephen Curry” 緒論?&#xff1a; 本章是MySQL篇中&#xff0c;非常實用性的篇章&#xff0c;相信在實際工作中對于表的查詢&#xff0c;很多時候會涉及多表的查詢&#xff0c;在多表查詢…
閱讀更多...
【基礎4】插入排序

【基礎4】插入排序

核心思想 插入排序是一種基于元素比較的原地排序算法&#xff0c;其核心思想是將數組分為“已排序”和“未排序”兩部分&#xff0c;逐個將未排序元素插入到已排序部分的正確位置。 例如撲克牌在理牌的時候&#xff0c;一般會將大小王、2、A、花牌等按大小順序插入到左邊&…
閱讀更多...
【Flink銀行反欺詐系統設計方案】3.欺詐的7種場景和架構方案、核心表設計

【Flink銀行反欺詐系統設計方案】3.欺詐的7種場景和架構方案、核心表設計

【Flink銀行反欺詐系統設計方案】3.欺詐的7種場景和架構方案、核心表設計 1. **欺詐場景分類與案例說明**1.1 **大額交易欺詐**1.2 **異地交易欺詐**1.3 **高頻交易欺詐**1.4 **異常時間交易欺詐**1.5 **賬戶行為異常**1.6 **設備指紋異常**1.7 **交易金額突變** 2. **普適性軟…
閱讀更多...
迷你世界腳本生物接口：Creature

迷你世界腳本生物接口：Creature

生物接口&#xff1a;Creature 彼得兔 更新時間: 2024-05-22 17:51:22 繼承自 Actor 具體函數名及描述如下: 序號 函數名 函數描述 1 getAttr(...) 生物屬性獲取 2 setAttr(...) 生物屬性設置 3 isAdult(...) 判斷該生物是否成年 4 setOxygenNeed(…
閱讀更多...
深入理解三色標記、CMS、G1垃圾回收器

深入理解三色標記、CMS、G1垃圾回收器

三色標記算法 簡介 三色標記算法是一種常見的垃圾收集的標記算法&#xff0c;屬于根可達算法的一個分支&#xff0c;垃圾收集器CMS&#xff0c;G1在標記垃圾過程中就使用該算法 三色標記法&#xff08;Tri-color Marking&#xff09;是垃圾回收中用于并發標記存活對象的核心算…
閱讀更多...
自動駕駛---不依賴地圖的大模型軌跡預測

自動駕駛---不依賴地圖的大模型軌跡預測

1 前言 早期傳統自動駕駛方案通常依賴高精地圖&#xff08;HD Map&#xff09;提供道路結構、車道線、交通規則等信息&#xff0c;可參考博客《自動駕駛---方案從有圖邁進無圖》&#xff0c;本質上還是存在問題&#xff1a; 數據依賴性高&#xff1a;地圖構建成本昂貴&#xf…
閱讀更多...
Xshell及Xftp v8.0安裝與使用-生信工具050

Xshell及Xftp v8.0安裝與使用-生信工具050

官網 https://www.xshell.com/zh/free-for-home-school/ XShell & Xftp 詳解 1. XShell 介紹 1.1 XShell 是什么&#xff1f; XShell 是一款強大的 Windows 終端模擬器&#xff0c;主要用于遠程管理 Linux、Unix 服務器。它支持 SSH、Telnet、Rlogin 及 SFTP 協議&…
閱讀更多...
跨域-告別CORS煩惱

跨域-告別CORS煩惱

跨域-告別CORS煩惱 文章目錄 跨域-告別CORS煩惱[toc]1-參考網址2-思路整理1-核心問題2-個人思考3-腦洞打開4-個人思考-修正版1-個人思考2-腦洞打開 3-知識整理1-什么是跨域一、同源策略簡介什么是源什么是同源是否是同源的判斷哪些操作不受同源策略限制跨域如何跨域 二、CORS 簡…
閱讀更多...
PE文件結構詳解（DOS頭/NT頭/節表/導入表）使用010 Editor手動解析notepad++.exe的PE結構

PE文件結構詳解（DOS頭/NT頭/節表/導入表）使用010 Editor手動解析notepad++.exe的PE結構

一&#xff1a;DOS部分 DOS部分分為DOS MZ文件頭和DOS塊&#xff0c;其中DOS MZ頭實際是一個64位的IMAGE_DOS——HEADER結構體。 DOS MZ頭部結構體的內容如下&#xff0c;我們所需要關注的是前面兩個字節&#xff08;e_magic&#xff09;和后面四個字節&#xff08;e_lfanew&a…
閱讀更多...
Node JS 調用模型Xenova_all-MiniLM-L6-v2實戰

Node JS 調用模型Xenova_all-MiniLM-L6-v2實戰

本篇通過將句子數組轉換為句子的向量表示&#xff0c;并通過平均池化和歸一化處理&#xff0c;生成適合機器學習或深度學習任務使用的特征向量為例&#xff0c;演示通過NodeJS 的方式調用Xenova/all-MiniLM-L6-v2 的過程。 關于 all-MiniLM-L6-v2 的介紹&#xff0c;可以參照上…
閱讀更多...
【C++學習篇】智能指針

【C++學習篇】智能指針

目錄 1. 智能指針的使用場景分析 2. RAII和智能指針的設計思路 3. C標準庫智能指針的使用 4.shared_ptr和weak_ptr 4.1shared_ptr的循環引用問題 4.2 weak_ptr 1. 智能指針的使用場景分析 下?程序中我們可以看到&#xff0c;new了以后&#xff0c;我們也delete了&#xff0c…
閱讀更多...
IntelliJ IDEA集成MarsCode AI

IntelliJ IDEA集成MarsCode AI

IntelliJ IDEA集成MarsCode AI IDEA中安裝插件 安裝完畢之后登錄自己的賬號 點擊鏈接&#xff0c;注冊賬號 https://www.marscode.cn/events/s/i5DRGqqo/ 可以選擇不同的模型
閱讀更多...
最新文章

Copyright @ 2022~2023