React Native 0.77 发布：更强的样式支持与性能优化

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

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

---

主要更新内容 ✨

1. 全新 CSS 特性支持：新增对 display: contents、boxSizing、mixBlendMode 和 outline 等属性的支持。
2. Android 性能提升：支持 Android 15 强制的全屏边到边显示，以及未来设备上的 16KB 内存页面优化。
3. CLI 与模板更新：废弃了 react-native init，推荐使用更现代的项目初始化工具。
4. iOS 项目默认使用 Swift：新创建的 iOS 项目现在默认采用 Swift 编写，提高性能与兼容性。
5. 关键改动与废弃功能：包括 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，体验这些新特性吧！

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。