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

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

我希望它的工作原理与以下代码类似：

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

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

这在react native with flexbox中可能吗？

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

这可以是一个定制组件来完成您的用例

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>
  )
}

从'react native'导入{Dimensions}
...
const AspectView=（{style，aspectRatio，children，…props}）=>{
设{height，width}=Dimensions.get（'window'）；
返回(
{儿童}
)
}

正如Hendy Irawan评论的那样，React Native向

样式表添加了
aspectRatio
属性


从文件中：

aspectRatio？：编号

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

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

因此，应采取以下措施：

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

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

const styles=StyleSheet.create({
视图：{
方面：1.5，
}
});
//稍后在render（）中
但这意味着它取决于窗口的宽度，而不是容器（父容器）。如何根据父对象的宽度设置它？我不相信它是这样工作的（不像web css）。最好的办法是以编程方式计算父对象，然后将其传递下去。我真的不明白为什么在移动应用程序中不可能做到这一点。如果父母知道它的宽度（无论是固定的还是计算的），为什么不允许孩子们方便地知道父母的宽度呢
alignSelf=“stretch”
工作得非常好，因此应该可以将其扩展一点，以允许子对象根据父对象（而不是窗口）的宽度设置属性？感谢您让我知道React Native中有
aspectRatio
style属性！这样省力！