我希望有一个视图,其宽度响应其容器宽度,同时保持其宽高比。 我不想硬编码宽度或高度,但保持动态和响应,以便它可以在多种情况下作为可重用组件重用。
我希望它与以下代码类似:
<View style={{
alignSelf: 'stretch',
aspectRatio: 1.5
}} />
它应该填充其容器的宽度,并根据其宽度动态设置自己的高度。
这是否可以与flexbox本地反应?
答案 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>
)
}