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
该属性允许元素从视觉上移除自身的布局影响，但保留其子元素。这非常适合用来创建不会干扰布局的包装组件。
示例：
go
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。
示例：
go
<View style={{
width: 100,
padding: 20,
borderWidth: 10,
boxSizing: 'content-box'
}} />这个属性使得在处理边距和边框时更具控制力。
1.3 mixBlendMode
新增的 mixBlendMode 属性允许实现复杂的颜色混合效果，使前景和背景颜色动态融合。这为设计独特的界面提供了更多可能性。
示例：
go
<View style={{
backgroundColor: 'red',
mixBlendMode: 'multiply'
}} />支持的混合模式包括 multiply、screen、overlay 等，开发者可以轻松创建丰富的视觉效果。
1.4 Outline 属性
React Native 0.77 引入了 outlineWidth、outlineStyle、outlineColor 等属性，它们类似于边框属性，但不会影响布局，适用于创建元素的高亮状态。
示例：
go
<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 示例：
go
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，体验这些新特性吧！
最后：