React Native 0.71：默认集成 TypeScript、Flexbox 间隙布局等新特性

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

今天我们正式发布 React Native 0.71 版本！本次更新包含多项重磅功能：

• 默认集成 TypeScript

• 通过 Flexbox 间隙属性简化布局

• 面向无障碍、样式和事件的 Web 风格属性

• 恢复 PropTypes 支持

• 开发者体验优化

• 新架构更新

本文将重点介绍 0.71 版本的核心亮点。

信息

完整变更列表请查阅 CHANGELOG.md。

默认集成 TypeScript

本次版本更新中，我们重点优化了 React Native 的 TypeScript 开发体验。

从 0.71 开始，当您通过 React Native CLI 创建新应用时，将默认生成 TypeScript 项目模板。新建项目已预置 tsconfig.json 配置文件，这意味着您的 IDE 开箱即用地支持类型化代码编写。

同时我们还在 react-native 包中内置了更精准的 TypeScript 类型声明。这意味着您不再需要安装 @types/react-native，类型定义将随 React Native 版本同步更新。

最后，我们已将所有文档示例更新为 TypeScript 语法。

备注

升级至 React Native 0.71 后，建议从 package.json 的 devDependencies 中移除 @types/react-native。

有关此变更的详细说明（包括迁移步骤及对 Flow 用户的影响），请参阅我们之前的博文 TypeScript 一等公民支持。

通过 Flexbox 间隙属性简化布局

借助 React Native 的 Flexbox 功能，您可以在不同屏幕尺寸上灵活布局组件。浏览器长期支持的 Flexbox 属性 gap、rowGap 和 columnGap，可用于精确控制 Flexbox 内各元素间距。

这些属性在 React Native 社区呼声已久，0.71 版本首次实现了像素单位间隙布局支持。未来版本将扩展支持百分比等更多单位。

该功能的实用性可通过以下场景说明：假设您需要构建响应式布局，其中包含尺寸不等的卡片元素，要求各卡片间距 10px 且紧贴父容器边缘。若使用子元素外边距实现此布局将非常棘手。

下图展示了为每个子元素设置 margin: 10 样式后的布局效果：

外边距会统一作用于所有子元素的边缘，且在Flexbox布局中不会折叠，导致卡片外部产生间距，内部间距也比预期多出一倍。虽然可以通过非均匀外边距、父容器负边距或间距减半等方法解决，但使用Flexbox间隙属性可以更优雅地实现。

使用flex gap属性后，只需在容器上设置gap: 10即可在卡片之间创建10像素的间距：

有关Flexbox间隙的更多信息，请参阅CSS Tricks的这篇技术文章。

符合Web标准的可访问性、样式与事件属性

本次更新新增了多项符合Web标准的属性，旨在统一React Native在多平台的API设计。这些新增属性均为补充性质，不会影响现有等效属性的行为或迁移。

当新引入的属性别名与现有属性共存时，别名属性值将优先生效。例如本次更新为Image组件添加了src属性别名（原属性为source）以与Web上的src属性对齐。若同时指定src和source，系统将采用新的src属性值。

备注

有关React Native与Web标准对齐的更多背景，请参阅提案文档及相关讨论。

可访问性

我们引入ARIA属性作为现有React Native可访问性属性的别名。

这些属性现已存在于所有React Native核心组件：aria-label、aria-labelledby、aria-modal、id、aria-busy、aria-checked、aria-disabled、aria-expanded、aria-selected、aria-valuemax、aria-valuemin、aria-valuenow及aria-valuetext。

同时引入了与Web行为等效的：aria-hidden、aria-live、role和tabIndex。

详见此议题。

组件特定行为

为与DOM属性名对齐，核心组件新增以下属性：

• Image：alt、tintColor、crossOrigin、height、referrerPolicy、src、srcSet及width

• TextInput：autoComplete、enterKeyHint、inputMode、readOnly及rows

详见此议题。

样式

为兼容CSS样式规范，以下样式功能得到扩展：

• aspectRatio 现已支持字符串值

• fontVariant 现已支持空格分隔的字符串值

• fontWeight 现在支持数值类型的值

• transform 现在支持字符串类型的值

以下别名已被添加，用于映射现有的 React Native 样式：

• objectFit

• pointerEvents

• userSelect

• verticalAlign

更多详情请参阅此 issue。

事件处理

最后，我们还新增了 PointerEvents 的可选实现

启用后，View 组件上的以下处理程序将支持悬停交互：

• onPointerOver, onPointerOut

• onPointerEnter, onPointerLeave

这些事件同样在 Pressability 中实现，提供了新的悬停支持功能

要启用这些特性，请将以下标志设置为 true：

import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';

// enable the JS-side of the w3c PointerEvent implementation
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;

// enable hover events in Pressibility to be backed by the PointerEvent implementation.
// shouldEmitW3CPointerEvents should also be true
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
  () => true;

备注

你还需要在 Android 和 iOS 原生配置中启用 React 功能标志

查看我们专门的 PointerEvents 文章了解更多详情

恢复 PropTypes

React Native 的属性类型（如 ViewPropTypes 和 Text.propTypes）曾在 0.66 版本被弃用，访问时会显示弃用警告。当它们在 0.68 版本被移除后，许多开发者在升级到最新版 React Native 时遇到了报错问题

经过调查，我们发现几个问题阻碍了社区响应弃用警告：首先，弃用警告有时缺乏明确指引导致被忽略（问题一、问题二）；其次，LogBox.ignoreLogs 会错误过滤这些警告。这两个问题现已修复，但我们希望给予开发者更多时间升级弃用调用点

因此在本版本中，我们重新引入 React Native 的 propTypes，方便开发者升级并迁移代码避免使用它们。deprecated-react-native-prop-types 包也已更新支持 0.71 的所有属性。未来我们将再次推进弃用并移除 propTypes，预计届时社区升级将更加顺利

注意

作为此次变更的一部分，我们还移除了 LogBox.ignoreLog 的控制台过滤功能。这意味着你之前通过 Logbox.ignoreLog 过滤的日志在升级后会重新显示

这是预期行为，因为它让弃用警告等日志能够被发现和修复

开发者体验改进

React DevTools

在此版本中，我们将两项流行的 Web 版 React DevTools 功能引入了 React Native

"点击检查"是 React Dev Tools 左上角的选项，允许您点击应用中的元素并在开发者工具中进行检查，类似于 Chrome 的元素检查器功能。

组件高亮功能会在应用中突出显示您在开发者工具中选择的元素，帮助您直观看到屏幕元素与 React 组件的对应关系。

以下是这两个功能的实际演示：

Hermes

在 React Native 0.70 中，我们已将 Hermes 设为 React Native 的默认引擎。

在 React Native 0.71 中，我们对 Hermes 进行了以下重要改进：

• 改进 source maps：通过 Metro 实现网络加载 source maps，我们恢复了在 Flipper 之外使用最新版 Chrome 开发者工具查看 source maps 的能力。

• 提升 JSON.parse 性能：此版本包含性能优化，可将 JSON.parse 的速度提升高达 30%。

• 增加 .at() 支持：Hermes 现已支持在 String、TypedArray 和 Array 上使用 .at() 方法。

完整变更列表请参阅 Road to 71 issue。

新架构

此版本根据用户反馈和收集的报告，对实验性新架构体验进行了多项改进：

• 缩短构建时间：新的分发模型采用 Maven Central，大幅减少 Android 构建时间，解决 Windows 上的构建问题，并提供更无缝的新架构体验。了解更多。

• 减少 C++ 代码量：现在无需在应用中添加任何 C++ 代码即可启用新架构，CLI 应用模板已清除所有 C++ 代码和 CMake 文件。了解更多。

• 改进 iOS 应用设置封装：在 iOS 上，我们采用类似 Android 的方法，将新架构设置逻辑封装在 RCTAppDelegate 类中，这将简化未来升级并减少破坏性变更。

• 改进 iOS 依赖管理：为库维护者新增 install_module_dependencies 函数，可在包 podspec 中调用以安装新架构所需依赖。

• 修复错误并改进 IDE 支持：修复了多个用户报告的 Bug 和问题（例如改进 Android 的 IDE 支持），这些报告来自我们的用户在新架构工作组中。

请注意，新架构仍是实验性 API 体验。请尝试新架构文档中的简化步骤，并将反馈提交至新架构工作组。

其他值得关注的修复

• 改进堆栈帧折叠：更新 React Native 内部帧列表后，LogBox 将更多显示您的代码而非内部帧，帮助更快调试问题。

• 构建时间优化： 我们将资源迁移至 Maven Central 的预构建库，显著提升了 Hermes 在现有架构和新架构下的构建速度（iOS 和 Android 均受益）。

• Android 模板优化： Android 模板经过深度清理，现已完全依赖 React Native Gradle 插件。配置说明可直接在模板中查看，或参阅官网新建的专属页面。

重大变更

• 控制台日志变更： LogBox.ignoreLog 不再过滤控制台日志。这意味着原先在 LogBox 中被静音的日志将重新显示在控制台中。更多细节请参阅此评论。

• 移除 AsyncStorage 和 MaskedViewIOS： 这两个组件自 0.59 版本起已被弃用，现正式移除。替代方案请查阅 React Native Directory 中的社区包。

• JSCRuntime 移至 react-jsc 包： react-jsi 现已拆分为 react-jsc 和 react-jsi。若使用 JSCRuntime，需额外添加 react-jsc 依赖（facebook/react-native@6b129d8）。

致谢

本次发布凝聚了 70 多位贡献者的心血，累计提交超 1000 次。

特别鸣谢以下 React Native 核心功能的贡献者：

• Flexbox 间隔支持：@intergalacticspacehighway 和 @jacobp100

• Web 风格属性：@gabrieldonadel @dakshbhardwaj @dhruvtailor7 @ankit-tailor @madhav23bansal

• 代码生成器优化：@AntoineDoubovetzky, @MaeIg, @Marcoo09, @Naturalclar, @Pranav-yadav, @ZihanChen-MSFT, @dakshbhardwaj, @dhruvtailor7, @gabrieldonadel, @harshsiri110, @ken0nek, @kylemacabasco, @matiassalles99, @mdaj06, @mohitcharkha, @tarunrajput, @vinayharwani13, @youedd, @byCedric

最后，感谢 @cortinico、@kelset、@dmytrorykun、@cipolleschi 和 @titozzz 完成此版本的发布工作！

立即体验 0.71.0！

React Native CLI 用户请查阅升级文档了解如何更新现有项目，或使用 npx react-native init MyProject 创建新项目。

React Native 0.71 版本将在 Expo SDK 48 中提供支持。

信息

0.71 现已成为 React Native 的最新稳定版本，0.68.x 版本已停止支持。更多信息请参阅 React Native 支持政策。