React Native 0.71正式版发布，Ts成为默认开发语言

2023年1月14日，React Native官方发布了0.71版本，此版本带来了很多重磅和突破性的更新，同时，感谢70多位贡献者带来的了1000多次提交。下面是0.71版本带来的主要更新内容：

• 默认开发语言为TypeScript
• 使用Flexbox Gap使布局更加简单
• 开发者体验提升
• 有关新架构内容的升级
• 引入的部分web开发标准的属性，样式及事件
• 恢复PropTypes
• 其他更新

TypeScript成为默认开发语言

从0.71版本开始，我们将React Native的默认开发语言从JavaScript变成TypeScript，在新建的项目的时候会有所体现，与此同时项目根目录会增加一个tsconfig.json文件用于辅助开发者编写语法正确的Ts代码。另外0.71版本因本身已支持ts，所以不需要再package.json文件中添加@types/react-native依赖。

有关TypeScript，我们可以将它理解为是增强版JavaScript。TypeScript 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。TypeScript 设计的初衷就是为了应对大型应用开发，它可以编译成纯 JavaScript，最终运行在浏览器环境中。

Flexbox Gap让布局更加简单

此版本引入了web开发标准的属性gap、rowGap、columnGap，使用这些属性可以很方便的设置组件间隔。并且，在未来的版本中，我们还会增加百分比布局。
那gap、rowGap、columnGap属性究竟有什么用呢？比如设置组件之间间隔为margin: 10，其效果如下图。

margin的作用就是用在所有子元素的外边缘，并且在Flexbox布局中下不会失效，主要用于设置元素外部的间距。同时，我们还可以通过设置非均匀边距、在父元素上使用负边距等来使得布局开发变得更加容易。

比如，使用gap属性，我们还可以在容器上设置gap: 10来实现卡片内部边距，如下图所示:

如果想要了解更多Flexbox gaps的内容，可以参考 blogpost from CSS Tricks。

Web属性支持

此版本添加了很多Web属性的支持，使得React Native的api和Web平保持一致，比如 accessibility, behavior和style props等。这些新属性都是是附加的，因此对于等效的可访问性、行为或样式，不会出现什么异常影响，比如Image和TextInput组件。

Accessibility

比如，我们引入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, and aria-valuetext。

并且，我们即将在未来的版本中引入其他一些行为属性，比如aria-hidden, aria-live, role和 tabIndex等。如果想要了解更多关于Accessibility的内容，可以打开Web Props umbrella issue。

Specific Behavior

未来，为了对齐Web标准，我们还会再基础组件中引入更多的可访问性、行为或样式等属性，比如Image和TextInput组件。

• Image: alt, tintColor, crossOrigin, height, referrerPolicy, src, srcSet, and width.
• TextInput: autoComplete, enterKeyHint, inputMode, readOnly, and rows.

Styles

为了与Web平台的css样式保持一致，我们在React Native中添加了如下的样式支持。

• aspectRatio：现在支持字符串类型的值
• fontVariant：现在支持空格分隔的字符串值
• fontWeight：现在支持数值类型的值
• transform：现在支持字符串类型的值

同时，以下样式属性也被添加到现有React Native样式中。

• objectFit
• pointerEvents
• userSelect
• verticalAlign

想要了解更多的Styles属性，可以参考Web Styles umbrella issue。

Events

最后，我们还添加了PointerEvents可选择项，一旦开启这一特性，处理View视图上的以下事件时将支持悬停。

• onPointerOver, onPointerOut
• onPointerEnter, onPointerLeave

当然，上面的事件对于 React Native的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;

恢复PropTypes

React Native的prop，如ViewPropTypes和Text.propTypes，在0.66版本中被弃用，如果直接使用它们会输出过时的警告，并且在0.68版本中我们移除了对prop的支持，如果在0.68及以上版本中使用它将会遇到错误。

不过，最近的一些调查让我们意识到弃用这一特性是错误的。首先，弃用警告并不总是可行的，这导致人们忽视了它们（比如issue one， issue two） 。其次，LogBox.ignoreLogs错误地过滤了弃用警告。不过，现在这两个问题都已经得到修复。

因此，在这个版本中，我们将重新添加了React Native的propTypes，以便开发者更容易的升级和迁移代码。同时，我们在0.71版本中更新了之前弃用的deprecated-react-native-prop-types插件包。不过，我们仍然计划在未来弃用并删除props。我们期望当我们重新移除时，社区不会出现之前那么多的问题。

开发者体验改善

React DevTools

在这个版本中，我们增加了两个比较好用的调试代码工具，即点击元素检查和组件高亮。 这对于我们开发中调试布局页面来说更加友好，也更加容易让我们定位组件元素，下面是演示图。

Hermes

在0.70版本中，我们将Hermes作为了React Native的默认引擎。在0.71版本中，我们对Hermes引擎做了进一步的升级，包括如下：

• JSON.parse性能提升30%
• 增加对String, TypedArray, and Array属性at()的支持
• 在Metro中通过网络实现加载source maps

新架构

当然，在这个版本中，我们也带来了诸多关于新架构体验及性能方面的升级。

• 大幅度减少了Android平台的编译时间，并解决了诸多Window平台的编译问题
• 现在可以启用新体系结构，而无需在应用程序中添加任何C++代码，并且CLI应用程序模板已清除所有C++代码和CMake文件。
• 在iOS平台设置开启新架构支持更加简介
• 在iOS平台，在podspec中新增了install_module_dependencies函数用于管理所有需要的依赖项。

其他重大修复

• 更好的堆栈帧管理：我们已经更新了React Native的内部帧列表，因此调用LogBox将将会更加频繁，可以帮助开发者更快地调试问题。
• 构建时间改进：我们将assets部分代码迁移到Maven Central中，以改善Hermes在当前和新架构下的构建时间(iOS和Android)。
• Android模板改进：Android模板被清理，现在完全依赖于React Native Gradle插件，开发者可以直接在React Native Gradle Plugin中找到配置说明。

其他重大更新

除了上面的介绍的更新外，此版本还带来了如下一些重大更新。

• 更改控制台日志：现在直接使用LogBox.ignoreLog不再过滤控制台日志，这意味着会在控制台中看到LogBox中静默的日志。有关更多细节，请参阅LogBox.isIgnoredLog() 。
• 移除AsyncStorage和MaskedViewIOS：这些组件在0.59版本已被弃用，所以是时候完全删除它们了。对于替代方案，请查看React Native社区的替换方案。
• JSCRuntime移到react-jsc： react-jsi现在分为react-jsc和react-jsi两部分。如果需要使用JSCRuntime，只需要添加react-jsc作为依赖项即可。

参考文档：https://reactnative.dev/blog/2023/01/12/version-071