React Native 0.77 发布：更强的样式支持与性能优化-51CTO.COM

React Native 0.77 正式发布！此次版本带来了多项重要改进，包括样式功能的增强、Android 平台的性能优化以及项目模板的升级。这一版本的核心目标是提升开发效率，同时确保在不同平台上的兼容性。接下来，我们来看看这次更新中的亮点内容。

主要更新内容 ✨

全新 CSS 特性支持：新增对 display: contents、boxSizing、mixBlendMode 和 outline 等属性的支持。
Android 性能提升：支持 Android 15 强制的全屏边到边显示，以及未来设备上的 16KB 内存页面优化。
CLI 与模板更新：废弃了 react-native init，推荐使用更现代的项目初始化工具。
iOS 项目默认使用 Swift：新创建的 iOS 项目现在默认采用 Swift 编写，提高性能与兼容性。
关键改动与废弃功能：包括 Metro 中 console.log 流日志功能的移除及原生动画行为的调整。

1. 全新 CSS 特性支持

1.1 display: contents

该属性允许元素从视觉上移除自身的布局影响，但保留其子元素。这非常适合用来创建不会干扰布局的包装组件。

示例：

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

在这个例子中，Alerting 组件包裹了子元素，但不会引入额外的布局盒，适合用于更灵活的布局设计。

1.2 boxSizing

React Native 现在支持 content-box 和 border-box 两种盒模型，与 Web 标准保持一致。但为了兼容性，默认仍使用 border-box。

示例：

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

这个属性使得在处理边距和边框时更具控制力。

1.3 mixBlendMode

新增的 mixBlendMode 属性允许实现复杂的颜色混合效果，使前景和背景颜色动态融合。这为设计独特的界面提供了更多可能性。

示例：

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

支持的混合模式包括 multiply、screen、overlay 等，开发者可以轻松创建丰富的视觉效果。

1.4 Outline 属性

React Native 0.77 引入了 outlineWidth、outlineStyle、outlineColor 等属性，它们类似于边框属性，但不会影响布局，适用于创建元素的高亮状态。

示例：

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

这为焦点状态的样式设计提供了新的选择。

2. Android 平台优化

2.1 支持 Android 15 全屏显示

新版支持 Android 15 强制边到边显示的要求，确保在 API 35 及以上的设备上应用布局无缝适配。如果你使用了 react-native-safe-area-context，应用将自动处理这些调整，否则需要手动更新布局以适配。

2.2 16KB 页面支持

React Native 0.77 针对未来的 Android 设备进行了 16KB 内存页面的适配工作。这一优化不仅提高了兼容性，也为性能提升奠定了基础。

3. CLI 和模板更新

废弃 react-native init

react-native init 已被废弃，建议改用以下现代化工具：

使用 Expo 初始化项目：npx create-expo-app
使用社区 CLI：npx @react-native-community/cli init

这种调整简化了项目创建过程，也更符合当前开发工具的趋势。

4. iOS 项目默认使用 Swift

新创建的 iOS 项目现在默认采用 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. 关键改动与废弃功能

移除 Metro 中的 console.log 流日志功能：开发者需要改用 Chrome DevTools Protocol（CDP）或第三方工具（如 Expo Tools）。
更稳定的滚动视图头部粘性布局。
改进绝对定位的布局一致性。
支持 TurboModules，提高原生模块性能。

总结

React Native 0.77 为开发者提供了更强大的工具和更高效的性能支持。从 CSS 新特性到 Android 的兼容优化，这些改进让跨平台开发更接近 Web 标准，同时为未来设备的适配提供保障。在升级时，需留意破坏性改动，尤其是日志处理方式的变化和 iOS 模板的更新。

赶快升级到 React Native 0.77，体验这些新特性吧！