React Native 0.77 正式發(fā)布！此次版本帶來了多項重要改進，包括樣式功能的增強、Android 平臺的性能優(yōu)化以及項目模板的升級。這一版本的核心目標是提升開發(fā)效率，同時確保在不同平臺上的兼容性。接下來，我們來看看這次更新中的亮點內(nèi)容。

主要更新內(nèi)容 ?

1. 全新 CSS 特性支持：新增對 display: contents、boxSizing、mixBlendMode 和 outline 等屬性的支持。
2. Android 性能提升：支持 Android 15 強制的全屏邊到邊顯示，以及未來設(shè)備上的 16KB 內(nèi)存頁面優(yōu)化。
3. CLI 與模板更新：廢棄了 react-native init，推薦使用更現(xiàn)代的項目初始化工具。
4. iOS 項目默認使用 Swift：新創(chuàng)建的 iOS 項目現(xiàn)在默認采用 Swift 編寫，提高性能與兼容性。
5. 關(guān)鍵改動與廢棄功能：包括 Metro 中 console.log 流日志功能的移除及原生動畫行為的調(diào)整。

1. 全新 CSS 特性支持

1.1 display: contents

該屬性允許元素從視覺上移除自身的布局影響，但保留其子元素。這非常適合用來創(chuàng)建不會干擾布局的包裝組件。

示例：

function Alerting({ children }) {
  return (
    <View
      style={{ display: 'contents' }}
      onPointerDown={() => alert('Hello World!')}>
      {children}
    </View>
  );
}

在這個例子中，Alerting 組件包裹了子元素，但不會引入額外的布局盒，適合用于更靈活的布局設(shè)計。

1.2 boxSizing

React Native 現(xiàn)在支持 content-box 和 border-box 兩種盒模型，與 Web 標準保持一致。但為了兼容性，默認仍使用 border-box。

示例：

<View style={{ 
  width: 100, 
  padding: 20, 
  borderWidth: 10, 
  boxSizing: 'content-box' 
}} />

這個屬性使得在處理邊距和邊框時更具控制力。

1.3 mixBlendMode

新增的 mixBlendMode 屬性允許實現(xiàn)復(fù)雜的顏色混合效果，使前景和背景顏色動態(tài)融合。這為設(shè)計獨特的界面提供了更多可能性。

示例：

<View style={{ 
  backgroundColor: 'red', 
  mixBlendMode: 'multiply' 
}} />

支持的混合模式包括 multiply、screen、overlay 等，開發(fā)者可以輕松創(chuàng)建豐富的視覺效果。

1.4 Outline 屬性

React Native 0.77 引入了 outlineWidth、outlineStyle、outlineColor 等屬性，它們類似于邊框?qū)傩?，但不會影響布局，適用于創(chuàng)建元素的高亮狀態(tài)。

示例：

<View style={{ 
  outlineWidth: 2, 
  outlineColor: 'blue', 
  outlineStyle: 'dashed' 
}} />

這為焦點狀態(tài)的樣式設(shè)計提供了新的選擇。

2. Android 平臺優(yōu)化

2.1 支持 Android 15 全屏顯示

新版支持 Android 15 強制邊到邊顯示的要求，確保在 API 35 及以上的設(shè)備上應(yīng)用布局無縫適配。如果你使用了 react-native-safe-area-context，應(yīng)用將自動處理這些調(diào)整，否則需要手動更新布局以適配。

2.2 16KB 頁面支持

React Native 0.77 針對未來的 Android 設(shè)備進行了 16KB 內(nèi)存頁面的適配工作。這一優(yōu)化不僅提高了兼容性，也為性能提升奠定了基礎(chǔ)。

3. CLI 和模板更新

廢棄 react-native init

react-native init 已被廢棄，建議改用以下現(xiàn)代化工具：

• 使用 Expo 初始化項目：npx create-expo-app
• 使用社區(qū) CLI：npx @react-native-community/cli init

這種調(diào)整簡化了項目創(chuàng)建過程，也更符合當(dāng)前開發(fā)工具的趨勢。

4. iOS 項目默認使用 Swift

新創(chuàng)建的 iOS 項目現(xiàn)在默認采用 Swift 語言，而非 Objective-C。以下是更新后的 AppDelegate 示例：

import UIKit
import React

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    var dependencyProvider = RCTAppDependencyProvider()

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        return true
    }
}

這項更新減少了代碼模板中的冗余，同時提升了性能，并為 Swift 框架的集成帶來了更多便利。

5. 關(guān)鍵改動與廢棄功能

• 移除 Metro 中的 console.log 流日志功能：開發(fā)者需要改用 Chrome DevTools Protocol（CDP）或第三方工具（如 Expo Tools）。
• 更穩(wěn)定的滾動視圖頭部粘性布局。
• 改進絕對定位的布局一致性。
• 支持 TurboModules，提高原生模塊性能。

總結(jié)

React Native 0.77 為開發(fā)者提供了更強大的工具和更高效的性能支持。從 CSS 新特性到 Android 的兼容優(yōu)化，這些改進讓跨平臺開發(fā)更接近 Web 標準，同時為未來設(shè)備的適配提供保障。在升級時，需留意破壞性改動，尤其是日志處理方式的變化和 iOS 模板的更新。

趕快升級到 React Native 0.77，體驗這些新特性吧！