React Native - 布局中使用的 aspectRatio 属性 是什么?

React Native - What is the aspectRatio property used for in layout?

我是 react native 的新手。我正在探索 layout 属性 here but i was stuck to understand the aspectRatio property because it isn't exist in CSS. But after doing a bit of research i understand this property a little bit. But i want to learn the steps that are documented here 并且完全不在我的脑海中并且无法得到它们。谁能用简单的话解释一下每一步

  • On a node (what is node here?) with a set width/height aspect ratio control the size of the unset dimension (what is unset dimension here?)
  • On a node (what is node here?) with a set flex basis aspect ratio controls the size of the node in the cross axis if unset
  • On a node (what is node here?) with a measure function aspect ratio works as though the measure function (what is function here?) measures the flex basis
  • On a node (what is node here?) with flex grow/shrink aspect ratio controls the size of the node in the cross axis if unset
  • Aspect ratio takes min/max dimensions into account (what is account here?)

我会很高兴所有的贡献者。谢谢!!!

除非另有说明,React native 规范中的 "node" 指的是任何实现 Node 接口的元素,有时指的是它的影子 DOM 对方。

您会在文档中注意到,有很多 objects 实现了 Node 接口,例如 Attr、Comment、CDATASection 或 Character。但是,在提及网页时,术语 "node" 通常表示两种最常见的节点类型:

它们被称为 nodes 因为 DOM 通常与树模型相关联,其中每个 child 元素表示为分支(节点) 可以有后续的 children.


aspect-ratio 是一个 CSS @media 规范,定义为 widthheight 之间的比率。在媒体查询中,它指的是视口的 widthheight,但它也常用于指代任何媒体元素(图像、视频等)。

关于长宽比,普遍接受的术语是:

  • landscape width 大于 height
  • 的元素
  • portrait height 大于 width
  • 的元素
  • square 等于 heightwidth
  • 的元素

React nativeaspectRatio 实现为 non-standard 属性 of "nodes"(不是视口),定义为数字,允许锁定 widthheight 之间的比例。

当您设置 aspectRatiowidthheight 之一时,它将根据 aspectRatio 值计算另一个。
2aspectRatio 值将尝试调整节点大小,使 heightwidth 小两倍,而 .2 的值将导致heightwidth.

大 5 倍的节点

为了将来的参考,每当您发现现有的 React Native 文档含糊不清或太稀缺时,寻找说明的最佳位置是:

  • MDN - 一个友好而全面的万物网络图书馆,由大型团队(Mozilla、Google、微软、Facebook 和 W3C)以及个人网络开发人员共同努力策划。
  • W3C 标准。这就是通常命名为 "official standard" 或 "standard specification" 的内容。

由于网络由多种不同的技术组成,W3C 很快就会变得势不可挡。但是,MDN 页面始终包含相关标准的链接(如适用)。


注意:不要将 W3C(World Wide Web Consortium)误认为是 w3schools。后者是一个私人网站,试图通过开发人员搜索 "official standard" 的流量获利。有点无害的蜱虫。