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 版本添加了对使用像素值定义的间隙的初始支持。在未来的版本中，我们将添加对更多值的支持，例如百分比。
要了解这为何有用，请想象一下尝试构建一个响应式布局，其中包含大小可变的卡片，彼此间隔 10px，并紧贴父容器的边缘。尝试使用子边距来实现此布局可能很棘手。
以下显示了一个布局，我们首先为每个子项提供 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。
我们还为以下属性引入了等效的 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 样式
有关更多详细信息，请参阅此 问题。
事件
最后，我们还添加了 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 types，例如 ViewPropTypes 和 Text.propTypes，在 0.66 版本中已弃用，访问它们会输出弃用警告。当它们在 0.68 版本中被删除时，许多开发者在升级到最新版本的 React Native 时开始遇到错误。
经过一些调查，我们意识到一些问题阻止了社区对弃用警告采取行动。首先，弃用警告并非始终可操作，这导致人们忽略它们（问题一，问题二）。其次，弃用警告被 LogBox.ignoreLogs 错误地过滤。这两个问题现在都已修复，但我们想给人们更多时间来升级已弃用的调用站点。
因此，在此版本中，我们重新添加了 React Native 的 propTypes，以便人们可以更轻松地升级和迁移他们的代码，以避免使用它们。deprecated-react-native-prop-types 包也已针对 0.71 版本中的所有属性进行了更新。将来，我们计划继续弃用并再次删除 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。
有关更改的完整列表，请参阅 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 Gap 支持：@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 创建新项目。
Expo SDK 版本 48 将支持 React Native 0.71 版本。
0.71 现在是 React Native 的最新稳定版本，0.68.x 版本现在不受支持。有关更多信息，请参阅 React Native 的支持策略。