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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容