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

时间:2016-05-10 09:06:57

标签: react-native flexbox

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

我希望它与以下代码类似:

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

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

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

2 个答案:

答案 0 :(得分:6)

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

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

来自文件:

  

aspectRatio?:数字

     

宽高比控制节点未定义尺寸的大小。   宽高比是一种非标准属性,仅在本机中可用   而不是CSS。

     

在具有设置宽度/高度宽高比的节点上控制大小   unset dimension在具有设置弹性基础宽高比控件的节点上   如果取消设置,则在交叉轴上节点的大小在具有a的节点上   测量功能纵横比就像测量功能一样工作   测量弹性基础在具有弹性增长/缩小纵横比的节点上   如果未设置宽高比,则控制横轴中节点的大小   考虑最小/最大尺寸

因此以下内容应该有效:

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

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

答案 1 :(得分: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>
  )
}