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

Question

我是 React Native 的新手。我正在探索 layout 属性 here但我无法理解 aspectRatio 属性，因为它在 CSS 中不存在。但是在做了一些研究之后，我对这个属性有了一点了解。但我想学习记录的步骤 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?)

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

Answer 1

除非另有说明，React native 规范中的“节点” 是指实现Node 的任何元素。接口(interface)，有时是它的影子 DOM 对应物。

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

• DOM Element
• DOM Text .

它们被称为节点，因为 DOM通常与树模型相关联，其中每个子元素都表示为分支(节点)，分支可以有后续子元素。

---

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

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

• landscape width 大于 height
的元素
• portrait height 大于 width
的元素
• square 具有相同height 和 width
的元素

React native 将 aspectRatio 实现为 “节点”(不是视口(viewport))的非标准属性，定义为数字，允许锁定 width 和 height 之间的比例。

当您设置 aspectRatio 和 width 和 height 之一时，它将根据 aspectRatio 计算另一个> 值(value)。
2 的 aspectRatio 值将尝试调整节点大小，使 height 比 width 小两倍，并且.2 的值将导致节点的 height 比 width 大 5 倍。

为了将来引用，每当您发现现有的 React Native 文档含糊不清或太少时，最好的地方是寻找说明:

• MDN - 一个关于万物网络的友好而全面的库，由大型团队(Mozilla、谷歌、微软、Facebook 和 W3C)以及个人网络开发者共同努力策划。
• W3C 标准。这就是通常所说的“官方标准”或“标准规范”。

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

---

注意:不要将 W3C(World Wide Web Consortium)误认为是 w3schools。后者是一个私有(private)网站，试图将开发者为寻找“官方标准”而产生的流量货币化。有点无害的蜱虫。