React Native 0.78 - React 19 及更多

今天我們很高興發布 React Native 0.78！

此版本在 React Native 中加入了 React 19，以及其他相關功能，例如 Android Vector 可繪圖物件的原生支援，以及 iOS 更佳的 Brownfield 整合。

重點

• React 19
• 朝向更小、更快速的版本發布
• Metro 中 JavaScript 日誌的選擇加入
• 新增 Android XML 可繪圖物件的支援
• iOS 上的 ReactNativeFactory

重點

React 19

React 19 現在可在 React Native 上使用！

React 19 需要更新您的應用程式，因為我們從 React 18 導入了一些變更。例如，我們移除了某些 API，例如 propTypes，您需要調整您的應用程式以使其與新版本的 React 相容。

請按照我們的逐步升級指示將您的應用程式升級至 React 19。

遷移後，您將能夠利用 React 的所有新功能，包括（但不限於）

• 動作： 這些是使用非同步轉換的函式。非同步轉換會自動為您管理資料提交：它們處理待定狀態、樂觀更新、錯誤處理等等。
• useActionState： 一個建構於動作之上的實用 Hook。它接受一個函式並傳回一個包裝好的動作以供呼叫。當動作被呼叫時，它將傳回動作的最後結果及其 pending 狀態。
• useOptimistic： 一個新的 Hook，可簡化在非同步請求進行中時，樂觀地顯示更新的最終狀態。如果請求發生錯誤，React 將自動切換回先前的值。
• use： 這是一個新的 API，允許在渲染期間存取資源。您現在可以使用 use 讀取 Promise 或 Context，而 React 將暫停直到它們解析。
• ref 作為 props： 您現在可以像使用任何其他 prop 一樣傳遞 ref 作為 prop。函式組件將不再需要 forwardRef，您現在可以遷移您的組件。
• 以及許多其他功能

如需新可用功能的完整列表，請參閱 React 19 發布部落格文章。

React 編譯器

React 編譯器是一個建置時工具，旨在透過自動應用記憶化來最佳化 React 應用程式。雖然開發人員可以手動使用 API，例如 useMemo、useCallback 和 React.memo，以防止不必要地重新計算應用程式中未變更的部分，但他們也可能忘記或誤用這些最佳化。React 編譯器透過利用其對 JavaScript 和 React 規則的理解來解決這個問題，以自動記憶化組件和 Hook 內的值或值組。

在此版本中，我們簡化了在您的 React Native 應用程式中啟用 React 編譯器的流程。在先前的版本中，您必須安裝兩個套件：編譯器及其執行階段。安裝這些套件後，您必須設定 Babel 外掛程式以透過 Metro 啟用 React 編譯器。

現在，您只需要安裝編譯器本身並設定 Babel 外掛程式即可。若要了解如何啟用它，您可以按照我們的逐步指南進行操作。

若要驗證編譯器是否正在執行，您可以開啟 React Native 開發者工具：您應該會在組件檢查器中看到已記憶化的組件附加了 Memo ✨ 標籤。

如果您想了解更多關於 React 編譯器的資訊，以下是一些實用資源

• React 編譯器 文件
• React 編譯器深度解析

朝向更小、更快速的版本發布

我們正在更新我們的發布流程，以便在 2025 年更頻繁地發布穩定的 React Native 版本。

您將更容易更新 React Native 版本，因為我們將減少我們發布的重大變更數量。更快速的版本發布也意味著我們在內部發布的所有錯誤修正程式都會更早地到達您手中，您可以從我們在 React Native 內部開發的最新功能中受益。

我們相信這個新模型將使 React Native 生態系統中的每位開發人員受益，因為更少的重大變更意味著一個更穩定的框架，每個人都可以信賴。

Metro 中 JavaScript 日誌的選擇加入

我們新增了一個選擇加入功能，以恢復透過 Metro 開發伺服器進行 JavaScript 日誌串流，先前在 0.77 中為社群 CLI 使用者移除。這是為了回應使用者回饋，以及檢視我們今天在替代方案方面的進展。

若要選擇加入，請使用新的 --client-logs 旗標。這也可以透過 npm 指令碼進行別名，以方便使用。

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

Metro 中的日誌串流仍將在未來取消，並且預設保持關閉。但是，我們打算給予開發人員更長的遷移期來適應此變更。

此更新也將在即將到來的 0.77.1 次要版本中提供。

新增 Android XML 可繪圖物件的支援

在 React Native 0.78 中，我們發布了一種在 Android 上載入圖示、插圖和其他圖形元素的新方法，即作為 XML 資源。這表示您可以使用 向量可繪圖物件來顯示任何比例的向量圖像，而不會損失品質，或使用 形狀可繪圖物件來繪製更基本的裝飾。這些都由您熟悉且喜愛的同一個 Image 組件支援。若要立即使用此功能，您可以像匯入任何其他 靜態資源一樣匯入 XML 資源，方法是在 source 屬性中參照它們。此外，使用 XML 資源而非點陣圖也有助於縮減您的應用程式大小，並在不同 DPI 的螢幕上產生更好的渲染效果。

// 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}} />;

效能與品質

與所有其他圖像類型一樣，Android 的 XML 資源在主執行緒之外載入和擴充，因此您不會遺失任何影格。這表示資源不保證會立即顯示，但也不會在資源載入時阻止使用者輸入。當您需要同時渲染許多圖示時，執行緒外解碼尤其重要。內部應用程式在使用 Android 的向量可繪圖物件時，實現了一些顯著的效能提升。

利用向量可繪圖物件等資源類型是顯示圖像而不會損失品質的完美方式，並且可以縮減 APK 檔案大小，因為您不需要為每個螢幕密度包含圖像類型。此外，向量可繪圖物件在載入後會從記憶體複製一次，因此如果您多次渲染同一個圖示，它們將全部同時顯示。

權衡取捨

重要的是要注意，可繪圖 XML 資源並非完美無缺，並且使用它們存在限制

• 它們必須在您的 Android 應用程式的建置時參照。這些資源會與 Android Asset Packaging Tool (AAPT) 一起傳遞到建置步驟中，以將原始 XML 轉換為二進位 XML。Android 不支援載入原始 XML 檔案，這是一個已知的限制。
• 它們無法透過 Metro 透過網路載入。如果您變更 XML 資源的目錄或名稱，您每次都需要重建您的 Android 應用程式。
• 它們沒有尺寸。預設情況下，它們將以 0x0 大小顯示，您需要為它們提供寬度和高度才能顯示出來。
• 它們在執行階段並非完全可自訂；您只能控制尺寸或整體色調顏色，但您無法自訂資源內部的個別元素屬性，例如筆劃寬度、邊框半徑或顏色。這些類型的自訂需要您 XML 資源的不同變體。

資訊

Android 的向量可繪圖物件並非 react-native-svg 等函式庫的完全替代品。它們專門為 Android 設計，不適用於 iOS。如果您想要在所有平台上擁有相同的 SVG，您必須繼續使用 react-native-svg。向量可繪圖物件僅以自訂性為代價提供效能優勢。

iOS 上的 ReactNativeFactory

透過 React Native 0.78，我們改進了 React Native 在 iOS 上的整合。

此版本引入了一個名為 RCTReactNativeFactory 的新類別，讓您可以建立 React Native 的執行個體，而無需 AppDelegate。這應該讓您可以在 ViewController 中建立新版本的 React Native，例如。這大幅簡化了與 Brownfield 應用程式的整合。

想像一下，您想要在應用程式的 View Controller 中顯示 React Native 視圖。從 React Native 0.78 開始，您需要做的就是在安裝 本指南 中顯示的所有依賴項後，新增此程式碼

+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
+    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
+    #else
+    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+    #endif
+  }
+}

React Native 將在您導航到 View Controller 後立即載入。

此程式碼會建立一個 RCTReactNativeFactory，為其指派一個委派，並要求它為 React Native 的視圖建立一個 rootView。

委派定義如下，它會覆寫 sourceURL 和 bundleURL 屬性，以告知 React Native 它可以在哪裡找到要載入到視圖中的 JS 捆綁包。

其他重大變更

一般

• React Native 開發者工具
  • 移除 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

• 將影像載入事件大小資訊從邏輯大小變更為像素 (這僅影響舊架構)

致謝

React Native 0.78 包含來自 87 位貢獻者的超過 509 個提交。感謝您的辛勤工作！

感謝所有為此版本文章撰寫功能文件的額外作者

• Dream11 團隊對 React Native 中 React 19 功能的全面測試
• Nicola Corti 在更快版本發布方面的工作
• Alex Hunt 在 Metro 日誌選擇加入方面的工作
• Peter Abbondanzo 在 Android XML 可繪圖物件支援方面的工作
• Oskar Kwaśniewski 在 ReactNativeFactory 方面的工作

升級至 0.78

除了升級文件外，請使用 React Native 升級助手來檢視現有專案的 React Native 版本之間的程式碼變更。

若要建立新專案

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

如果您使用 Expo，Expo SDK 的 Canary 版本將支援 React Native 0.78。

資訊

0.78 現在是 React Native 的最新穩定版本，而 0.75.x 已移至不受支援狀態。如需更多資訊，請參閱 React Native 的支援政策。我們的目標是在不久的將來發布 0.75 的最終終止維護更新。