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

Question

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

我希望它的工作原理类似于以下代码:

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

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

这是否可以与flexbox本地反应？

Answer 1

正如Hendy Irawan所说，React Native将aspectRatio属性添加到StyleSheet。

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

从文档中：

AspectRatio ?:数字

长宽比控制节点未定义尺寸的大小。宽高比是一种非标准属性，仅可用于react native而不适用于CSS。

在设置了宽/高长宽比的节点上控制未设置尺寸的大小在设置了伸缩基础长宽比的节点上（如果未设置）控制横轴上节点的大小在具有测量功能长宽比的节点上有效就像测量功能测量弹性基础一样，如果未设置，则纵横比会考虑最小/最大尺寸，并且具有弹性增长/收缩纵横比的节点将控制横轴上节点的大小

因此，以下应工作：

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

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