React Native 0.71：默认 TypeScript、Flexbox Gap 等...
今天我们发布 React Native 0.71 版！这是一个功能丰富的版本，包括：
在这篇文章中，我们将介绍 0.71 版的一些亮点。
有关更改的完整列表，请查看 CHANGELOG.md。
默认支持 TypeScript
在此版本中，我们正在投入 React Native 的 TypeScript 体验。
从 0.71 开始，当您通过 React Native CLI 创建新的 React Native 应用程序时，您将默认获得一个 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 gap 简化布局
通过 React Native，您可以使用 Flexbox 在不同的屏幕尺寸上灵活布局组件。浏览器支持 Flexbox 属性 gap、rowGap 和 columnGap，它们允许您指定 Flexbox 中所有项目之间的空间量。
这些属性在 React Native 中一直备受期待，0.71 版本增加了对使用像素值定义的间隙的初步支持。在未来的版本中，我们将增加对更多值的支持，例如百分比。
为了了解这为什么有用，想象一下尝试构建一个响应式布局，其中包含大小可变、彼此相距 10 像素、紧贴父容器边缘的卡片。尝试使用子边距实现这种布局可能很棘手。
以下显示了一个布局，我们首先为每个子元素设置 margin: 10 样式
边距统一应用于所有子元素的边缘，并且在 Flexbox 下不会折叠，这导致卡片外部出现间距，并且内部间距是我们所需间距的两倍。我们可以通过应用非统一边距、在父元素上使用负边距、将我们预期间距减半等方式来解决这个问题，但这可以变得更容易。
使用 flex gap，可以通过在容器上设置 gap: 10 来实现此布局，以便卡片内部之间有 10 像素的间隙
有关 Flexbox 间隙的更多信息，请参阅 CSS Tricks 的这篇博客文章。
受 Web 启发的辅助功能、样式和事件属性
此版本包含许多受 Web 标准启发的新属性，以使 React Native 的 API 在多个平台之间保持一致。这些新属性纯粹是新增的，因此对于等效的辅助功能、行为或样式属性，预计不会有任何迁移或行为更改。
对于引入的任何新属性别名，如果存在名称不同且两者都指定的现有属性，则新的别名属性值将优先。例如，此版本在 Image 组件上为 source 添加了 src 属性别名，以与 Web 上的 src 属性对齐。如果同时提供了 src 和 source，则将使用新的 src 属性。
辅助功能
我们引入了 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。
我们还为 aria-hidden、aria-live、role 和 tabIndex 引入了等效的 Web 行为。
有关更多详细信息，请参阅此 问题。
组件特定行为
还引入了一些属性，用于将属性名称与核心组件的等效 DOM 属性名称对齐。
- Image：
alt、tintColor、crossOrigin、height、referrerPolicy、src、srcSet和width。 - TextInput：
autoComplete、enterKeyHint、inputMode、readOnly和rows。
有关更多详细信息，请参阅此 问题。
样式
为了与某些 CSS 样式对齐，以下样式已进行了功能扩展
aspectRatio现在支持字符串值fontVariant现在支持空格分隔的字符串值fontWeight现在支持数值transform现在支持字符串值
以下别名已添加到现有 React Native 样式中，以使其可见
有关更多详细信息，请参阅此 问题。
事件
最后，我们还添加了 PointerEvents 的可选实现
启用后，View 上的以下处理程序将支持悬停
onPointerOver、onPointerOutonPointerEnter、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;
查看我们专门的 PointerEvents 文章以了解更多信息。
恢复 PropTypes
React Native 的 prop 类型，例如 ViewPropTypes 和 Text.propTypes，在 0.66 版本中被弃用，访问它们会输出弃用警告。当它们在 0.68 版本中被移除时，许多开发者在升级到最新版本的 React Native 时开始遇到错误。
经过一些调查，我们发现有几个问题阻碍了社区对弃用警告采取行动。首先，弃用警告并非总是可操作的，这导致人们忽略它们（问题一，问题二）。其次，弃用警告被 LogBox.ignoreLogs 错误地过滤了。这两个问题现在都已修复，但我们希望给人们更多时间来升级已弃用的调用站点。
因此，在此版本中，我们重新添加了 React Native 的 propTypes，以便人们更容易升级和迁移他们的代码以避免使用它们。deprecated-react-native-prop-types 包也已为 0.71 中的所有 prop 进行了更新。将来，我们计划继续弃用并再次删除 prop types。我们预计，当我们再次进行删除时，社区遇到的问题将大大减少。
作为此更改的一部分，我们还将从 LogBox.ignoreLog 中移除控制台过滤。这意味着您之前使用 Logbox.ignoreLog 过滤的日志在升级时将再次出现在控制台中。
这是预期的，因为它允许发现和修复弃用警告等日志。
开发者体验改进
React DevTools
在此版本中，我们已将 Web 上的两个流行的 React DevTools 功能引入 React Native。
“点击检查”是 React Dev Tools 左上角的选项，它允许您点击应用程序中的项目以在 Dev Tools 中检查它，类似于 Chrome 元素检查器。
组件高亮将高亮您在 DevTools 中选择的元素，以便您可以看到哪个 React 组件与屏幕上的哪个元素对齐。
以下是这两个功能的实际演示
Hermes
在 React Native 0.70 中，我们已将 Hermes 作为 React Native 的默认引擎。
在 React Native 0.71 中，我们正在升级 Hermes，并进行了一些显著改进
- 改进源映射：通过使用 Metro 通过网络加载源映射，我们恢复了在 Flipper 之外的最新版本 Chrome Dev Tools 中使用源映射的能力。
- 改进
JSON.parse性能：此版本包含一个性能优化，将JSON.parse的性能提高了 30%。 - 添加对
.at()的支持：Hermes 现在 支持.at()用于String、TypedArray和Array。
有关更改的完整列表，请参阅 Road to 71 问题。
新架构
此版本根据我们目前收集的用户反馈和报告，对实验性的新架构体验进行了许多改进。
- 缩短构建时间：新的分发模型使用 Maven Central，这使我们能够大大缩短 Android 上的构建时间，解决 Windows 上的许多构建问题，并为新架构提供更流畅的体验。在此处阅读更多内容。
- 减少 C++ 代码编写：现在您可以启用新架构，而无需在应用程序中添加任何 C++ 代码，并且 CLI 应用程序模板已清除了所有 C++ 代码和 CMake 文件。在此处阅读更多内容。
- 更好地封装 iOS 应用设置：在 iOS 上，我们遵循了与 Android 类似的方法，并将新架构的大部分设置逻辑封装在
RCTAppDelegate类中，这将简化未来的升级，减少手动破坏性更改。 - 更好地管理 iOS 上的依赖项：对于库维护者，我们添加了一个新的
install_module_dependencies函数，可以在您的包podspec中调用，它将安装新架构所需的所有依赖项。 - 错误修复和更好的 IDE 支持：我们修复了用户在 新架构工作组中报告的几个错误和问题（例如 更好的 Android IDE 支持）。
提醒一下，新架构仍是实验性 API 体验，我们正在迭代更改以使其更易于采用。请尝试 新架构文档中简化的新步骤，并将您的任何反馈发布到 新架构工作组。
其他值得注意的修复
- 更好的堆栈帧折叠：我们已经更新了 React Native 的内部帧列表，因此 LogBox 将更频繁地显示您的代码，而不是内部 React Native 帧，帮助您更快地调试问题。
- 构建时间改进： 我们已将资产迁移到 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。
- Codegen 改进：@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 的支持策略。