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,其效果如下图。

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

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

image.png
如果想要了解更多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

著有《React Native移动开发实战》1,2、《Kotlin入门与实战》《Weex跨平台开发实战》、《Flutter跨平台...

5.2k 声望
15.2k 粉丝
0 条评论
推荐阅读
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.3k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功12阅读 1.5k评论 1

封面图
JS 函数式概念: 管道 和 组合
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智6阅读 591

快速构建页面结构的 3D Visualization
可以通过 控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系,像是这样:

chokcoco6阅读 1.6k

著有《React Native移动开发实战》1,2、《Kotlin入门与实战》《Weex跨平台开发实战》、《Flutter跨平台...

5.2k 声望
15.2k 粉丝
宣传栏