React Native 0.77 發(fā)布：更強(qiáng)的樣式支持與性能優(yōu)化
React Native 0.77 正式發(fā)布！此次版本帶來(lái)了多項(xiàng)重要改進(jìn)，包括樣式功能的增強(qiáng)、Android 平臺(tái)的性能優(yōu)化以及項(xiàng)目模板的升級(jí)。這一版本的核心目標(biāo)是提升開(kāi)發(fā)效率，同時(shí)確保在不同平臺(tái)上的兼容性。接下來(lái)，我們來(lái)看看這次更新中的亮點(diǎn)內(nèi)容。
主要更新內(nèi)容 ?
- 全新 CSS 特性支持：新增對(duì) display: contents、boxSizing、mixBlendMode 和 outline 等屬性的支持。
- Android 性能提升：支持 Android 15 強(qiáng)制的全屏邊到邊顯示，以及未來(lái)設(shè)備上的 16KB 內(nèi)存頁(yè)面優(yōu)化。
- CLI 與模板更新：廢棄了 react-native init，推薦使用更現(xiàn)代的項(xiàng)目初始化工具。
- iOS 項(xiàng)目默認(rèn)使用 Swift：新創(chuàng)建的 iOS 項(xiàng)目現(xiàn)在默認(rèn)采用 Swift 編寫(xiě)，提高性能與兼容性。
- 關(guān)鍵改動(dòng)與廢棄功能：包括 Metro 中 console.log 流日志功能的移除及原生動(dòng)畫(huà)行為的調(diào)整。
1. 全新 CSS 特性支持
1.1 display: contents
該屬性允許元素從視覺(jué)上移除自身的布局影響，但保留其子元素。這非常適合用來(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 等，開(kāi)發(fā)者可以輕松創(chuàng)建豐富的視覺(jué)效果。
1.4 Outline 屬性
React Native 0.77 引入了 outlineWidth、outlineStyle、outlineColor 等屬性，它們類(lèi)似于邊框?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)建過(guò)程，也更符合當(dāng)前開(kāi)發(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 流日志功能：開(kāi)發(fā)者需要改用 Chrome DevTools Protocol（CDP）或第三方工具（如 Expo Tools）。
- 更穩(wěn)定的滾動(dòng)視圖頭部粘性布局。
- 改進(jìn)絕對(duì)定位的布局一致性。
- 支持 TurboModules，提高原生模塊性能。
總結(jié)
React Native 0.77 為開(kāi)發(fā)者提供了更強(qiáng)大的工具和更高效的性能支持。從 CSS 新特性到 Android 的兼容優(yōu)化，這些改進(jìn)讓跨平臺(tái)開(kāi)發(fā)更接近 Web 標(biāo)準(zhǔn)，同時(shí)為未來(lái)設(shè)備的適配提供保障。在升級(jí)時(shí)，需留意破壞性改動(dòng)，尤其是日志處理方式的變化和 iOS 模板的更新。
趕快升級(jí)到 React Native 0.77，體驗(yàn)這些新特性吧！
