如何通过保持纵横比根据宽度动态设置视图高度？答案

【问题标题】：How to dynamically set height of view based on its width by keeping aspect ratio?如何通过保持纵横比根据宽度动态设置视图高度？
【发布时间】：2016-09-05 03:48:03
【问题描述】：

我想要一个视图，其宽度响应其容器宽度，同时保持其纵横比。我不想硬编码宽度或高度，但要保持动态和响应性，以便它可以在多种情况下作为可重用组件重用。

我希望它的工作方式类似于以下代码：

<View style={{
  alignSelf: 'stretch',
  aspectRatio: 1.5
}} />

它应该填充其容器的宽度并根据其宽度动态设置自己的高度。

这可能在带有 flexbox 的 react-native 中实现吗？

【问题讨论】：

感谢您告诉我有在 React Native 中有 aspectRatio 样式属性！如此省力！

标签： react-native flexbox

【解决方案1】：

是的，您可以使用Dimensions API 获取窗口的宽度，然后以编程方式设置高度。我通常会在应用加载后立即调用尺寸，在您需要知道宽度之前，然后根据需要传递对象。

这可能是一个自定义组件来完成您的用例。

import {Dimensions} from 'react-native'

...

const AspectView = ({style, aspectRatio, children, ...props}) => {
  let {height, width} = Dimensions.get('window');
  return (
    <View style={[style, {height: width * aspectRatio}] {...props}>{children}</View>
  )
}

【讨论】：

但这意味着它取决于 window 的宽度，而不是 container（父级）。如何根据父级的宽度进行设置？
我不相信它是这样工作的（不像 web css）。最好的办法是以编程方式计算父代，然后将其传递下去。
我真的不明白为什么这在移动应用程序中是不可能的。如果父母知道它的宽度（无论是固定的还是计算的），为什么不让孩子方便地知道其父母的宽度。 alignSelf="stretch" 工作得很好，所以应该可以扩展一点以允许孩子根据父母（而不是窗口）的宽度设置属性？

【解决方案2】：

正如 Hendy Irawan 评论的那样，React Native 将 aspectRatio 属性添加到 StyleSheet。

https://facebook.github.io/react-native/docs/layout-props.html#aspectratio

来自文档：

纵横比？：数字

纵横比控制节点未定义维度的大小。纵横比是非标准属性，仅在本机反应中可用而不是 CSS。

在具有设置的宽/高纵横比的节点上，控制节点的大小未设置维度在具有设置弹性基础纵横比控件的节点上如果未设置，则为交叉轴上节点的大小测量函数纵横比就像测量函数一样工作测量弹性基础在具有弹性增长/收缩纵横比的节点上如果未设置纵横比，则控制交叉轴上节点的大小考虑最小/最大尺寸

因此以下应该可以工作：

const styles = StyleSheet.create({
  view: {
    aspectRatio: 1.5,
  }
});

// later in render()
<View style={styles.view} />

【讨论】：