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 gap 的更多信息，请参阅 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。
有关更多详细信息，请参阅此 issue。
组件特定行为
还引入了一些属性，以使属性名称与核心组件的等效 DOM 属性名称对齐。
- Image：
alt、tintColor、crossOrigin、height、referrerPolicy、src、srcSet和width。 - TextInput：
autoComplete、enterKeyHint、inputMode、readOnly和rows。
有关更多详细信息，请参阅此 issue。
样式
为了与某些 CSS 样式对齐，已对以下样式进行了功能扩展
aspectRatio现在支持字符串值fontVariant现在支持空格分隔的字符串值fontWeight现在支持数值transform现在支持字符串值
以下别名已添加到现有 React Native 样式中
有关更多详细信息，请参阅此 issue。
事件
最后，我们还添加了 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 版本中的所有 props 进行了更新。将来，我们计划继续弃用并再次移除 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 版本发布之路 issue。
新架构
此版本根据用户反馈和我们迄今为止收集的报告，为实验性的新架构体验带来了许多改进。
- 减少构建时间：新的分发模型使用 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 创建新项目。
React Native 0.71 版本将在 Expo SDK 版本 48 中支持。
0.71 现在是 React Native 的最新稳定版本，0.68.x 版本现在不受支持。有关更多信息，请参阅 React Native 的支持策略。