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

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

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

1. 全新 CSS 特性支持

1.1 display: contents

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

示例：

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

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

1.2 boxSizing

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

示例：

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

這個(gè)屬性使得在處理邊距和邊框時(shí)更具控制力。

1.3 mixBlendMode

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

示例：

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

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

1.4 Outline 屬性

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

示例：

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

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

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

2.1 支持 Android 15 全屏顯示

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

2.2 16KB 頁(yè)面支持

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

3. CLI 和模板更新

廢棄 react-native init

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

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

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

4. iOS 項(xiàng)目默認(rèn)使用 Swift

新創(chuàng)建的 iOS 項(xiàng)目現(xiàn)在默認(rèn)采用 Swift 語(yǔ)言，而非 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
    }
}

這項(xiàng)更新減少了代碼模板中的冗余，同時(shí)提升了性能，并為 Swift 框架的集成帶來(lái)了更多便利。

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

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

總結(jié)

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

趕快升級(jí)到 React Native 0.77，體驗(yàn)這些新特性吧！