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

时间:2018-12-04 08:17:11

标签: css reactjs css3 react-native react-native-flexbox

我是react native的新手。我正在探索layout属性here,但由于aspectRatio中不存在CSS属性,我被困住了。但是经过一些研究后,我对这个特性有了一点了解。但是我想学习记录在here中的步骤,这些步骤完全超出了我的想法,无法理解。任何人都可以用简单的话来解释每个步骤

  
      
  • 在具有设置的宽/高宽高比的节点(这里的节点是什么?)上,控制未设置尺寸的大小(这里的未设置尺寸?)
  •   
  • 在节点上(这里的节点是什么?)(如果未设置,则设置了弹性基础长宽比)控制横轴上节点的大小
  •   
  • 在具有度量函数宽高比的节点(此处的节点是什么?)上,其工作原理就像度量函数(此处的功能是什么?)度量弹性基准一样
  •   
  • 在节点上(这里的节点是什么?)具有弹性增长/收缩宽高比,如果未设置,则控制交叉轴上节点的大小
  •   
  • 长宽比考虑了最小/最大尺寸(这里考虑了什么?)
  •   

我将对所有贡献者感到高兴。谢谢!!!

1 个答案:

答案 0 :(得分:1)

除非另有说明,否则React本机规范中的“节点” 指实现Node接口的任何元素,有时还指与影子DOM对应的元素。

您会在文档中注意到,有许多实现Node接口的对象,例如Attr,Comment,CDATASection或Character。但是,当指网页时,术语“节点” 通常表示两种最常见的节点类型:

它们之所以称为节点,是因为DOM通常与树模型相关联,在树模型中,每个子元素都表示为可以具有后续子元素的分支(节点)。


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

关于长宽比,公认的术语是:

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

反应原生aspectRatio实现为“节点” (不是视口)的非标准属性,定义为一个数字,以允许将widthheight之间的比率锁定在适当的位置。

设置aspectRatio以及widthheight中的一个时,它将基于aspectRatio值计算另一个。
aspectRatio的{​​{1}}值将尝试通过使2小于height两倍的width来调整节点的大小,而.2的值将导致节点的heightwidth大5倍。

供以后参考,每当您发现现有的React Native文档含糊不清或太过稀缺时,寻求澄清的最佳位置是:

  • MDN-物联网中一个友好而全面的库,由大型团队(Mozilla,Google,Microsoft,Facebook和W3C)以及各个Web开发人员共同努力策划。
  • W3C标准。这就是通常所说的“官方标准”或“标准规范”。

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


注意:请勿将W3C(World Wide Web Consortium)误认为是w3schools。后者是一个私人网站,旨在利用开发人员为寻求“官方标准”而产生的流量获利。有点无害的滴答声。