共计 3980 个字符,预计需要花费 10 分钟才能阅读完成。
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