React Native 0.77 版本發佈:新特性、改進與遷移説明
2025 年 1 月 21 日,React Native 0.77 正式發佈,此版本帶來諸多新特性、對 Android 的支持增強、社區模板更新以及一些重要變更。
一、新特性亮點
(一)CSS 新特性助力佈局、尺寸與混合效果
- display: contents 簡化佈局邏輯:該屬性使元素自身在佈局結構中“消失”,但子元素仍正常渲染,就像直接作為父元素的子元素一樣。在構建需處理事件的包裝組件或與 ShadowTree 交互場景中,可在不影響佈局的前提下為子元素應用樣式。例如,構建一個當內部組件被按下時彈出提示的包裝組件,使用該屬性可避免添加多餘佈局框,確保提示僅在目標子元素區域觸發。
- boxSizing 精確控制元素尺寸計算:定義了元素尺寸屬性(如 width、height 等)的計算方式,支持 border-box 和 content-box 兩種值,默認值為 border-box。與網頁默認值不同,此默認設置是為保證向後兼容性。如在設置了 padding 和 borderWidth 的 View 中,使用不同 boxSizing 值會使尺寸計算包含或不包含邊框與內邊距,開發者可據此靈活調整佈局尺寸邏輯。
- mixBlendMode 與 isolation 實現元素顏色混合控制:mixBlendMode 屬性允許元素在堆疊上下文中與其他元素混合顏色,其取值對應多種混合模式(如 multiply、screen 等),可實現豐富視覺效果。同時新增 isolation 屬性,設置為 isolate 可使 View 形成獨立堆疊上下文,防止具有 mixBlendMode 的子元素過度混合顏色,讓開發者對顏色混合範圍有更精細掌控。
- Outline props 突出元素輪廓:引入 outlineWidth、outlineStyle、outlineSpread 和 outlineColor 等輪廓屬性,與 border 屬性類似,但輪廓繪製在邊框盒周圍,可在不影響佈局的情況下突出元素,為樣式設計提供更多選擇。
(二)Android 支持增強
- 適配 Android 15 強制邊緣到邊緣顯示:在 targetSdk 為 35 構建應用時,Android 15 會強制應用全屏顯示。若未妥善處理可能破壞 UI,使用 react-native-safe-area-context 庫可自動適配此變化,開發者需關注並確保應用在新特性下正常顯示。
- 支持 16KB 頁面大小提升性能:Android 15 支持 16KB 內存頁面大小,雖目前為可選功能,但 React Native 0.77 已準備好全面支持,開發者可在特定設備上測試並基於此發佈應用,為未來設備兼容性和性能優化奠定基礎。
二、社區 CLI 和模板更新
(一)社區 CLI 變更
- 棄用 react-native init 命令:此版本徹底棄用該命令,開發者可選擇使用 Expo 的 npx create-expo-app 命令或通過 npx @react-native-community/cli init 直接調用社區 CLI 來創建新項目。
- 移除 Metro 中的快捷操作鍵:去掉了 Metro 中用於調用 run-android 和 run-ios 社區 CLI 命令的‘a’和‘i’鍵盤快捷鍵,因這些快捷鍵體驗不佳且很少使用,同時認為框架更適合管理終端輸出。
(二)社區模板更新
將 iOS 應用的社區模板編程語言從 Objective-C 遷移到 Swift,用單個 AppDelegate.swift 文件替換了原來的 main.m、AppDelegate.h 和 AppDelegate.mm 文件。但仍支持 Objective-C++ 變體,新項目默認使用 Swift,開發者也可按需遷移回 Objective-C。需注意,若應用有 C++ 編寫的本地模塊,因 Swift 與 C++ 互操作性尚不成熟穩定,暫無法在 Swift 中註冊,此類應用應避免遷移 AppDelegate 到 Swift。
三、重大變更
(一)移除 Metro 中的 console.log() 流
為提升調試可靠性並匹配現代瀏覽器工具功能,移除了通過 Metro 的日誌轉發功能(0.76 版本已棄用),轉向僅使用 Chrome DevTools Protocol (CDP)。開發者可使用 React Native DevTools 的控制枱面板查看 JS 日誌,也可通過第三方擴展(如 Expo Tools、Radon IDE)將 VS Code 連接為 CDP 調試器,但 React 團隊暫不直接支持這些集成,正在開發第一方 VS Code 支持功能,同時 Expo CLI 仍提供日誌流功能。
(二)其他變更
- 動畫方面:原生循環動畫在循環結束時不再發送 React 狀態更新。
- 佈局方面:ScrollView 中粘性頭部的 position 會被正確考慮,絕對定位行為更合規。
- JS 模塊方面:移除 ReactFabricInternals 模塊。
- 原生模塊方面:NativeModules 對象可用於在 JS 中加載 turbomodules,增強了與 Turbo Native Modules 的兼容性。
- 包方面:dev-middleware 要求框架指定相對於中間件主機的 serverBaseUrl。
- API 變更方面:從 AppRegistry 中移除 useConcurrentRoot 類型,從 NativeMethods TypeScript 定義中移除 refs 屬性。
- UX 變更方面:從開發服務器關鍵命令中移除“run on iOS”和“run on Android”。
- Android 特定變更:基於 Kotlin 2.0.21 構建,部分 API 進行了空值處理、重命名或移除限制訪問等操作,如調整 ReadableArray 非原始類型 getter 為可選、重命名 DevSupportManagerBase.getCurrentContext 等,同時一些內部包和類不再可訪問。
- iOS 特定變更:移除 RCTConstants.RCTGetMemoryPressureUnloadLevel 等多個 API,替換 UseTurboModuleInteropForAllTurboModules 為合適功能標誌,將部分 CGColorRef 使用替換為 UIColor,RCTAppDelegate 加載第三方依賴需使用 RCTDependencyProvider,CocoaPods 設置第三方依賴 C++ 版本避免編譯問題。
四、React 19 支持計劃
React 19 已於 2024 年 12 月 6 日發佈,但 React Native 0.77 分支已確定無法引入,將在 React Native 0.78 版本中集成。開發者可使用 npx @react-native-community/cli init YourReact19App --version 0.78.0-rc.0 命令創建基於 React 19 的新應用進行嘗試。
五、升級指南
對於現有項目,可使用 React Native Upgrade Helper 結合升級文檔查看版本間代碼變更。創建新項目可使用 npx @react-native-community/cli@latest init MyProject --version latest 命令。Expo 用户需關注 Expo SDK 52 對 React Native 0.77 的支持(具體更新説明將在 Expo 博客發佈)。目前 0.77 為最新穩定版,0.74.x 已停止支持,React Native 團隊計劃近期發佈 0.74 的最終停止更新説明。
此版本眾多新特性和改進為 React Native 應用開發帶來更多功能與性能提升機會,開發者需根據項目情況妥善處理變更和升級事宜。