[英]React native responsive header height
我试图设置我的标题高度,以便对平板电脑和智能手机做出响应。 我已经尝试过使用flex列:
const headerStyle = {
paddingHorizontal: theme.metrics.mainPadding,
paddingTop: 0,
paddingBottom: 0,
backgroundColor: theme.colors.blue,
flex: 0.5,
flexDirection: 'column',
};
但是,标题在平板电脑上看起来不错,但在智能手机上太高了。
为不同设备设置尺寸的最佳方法是什么?
编辑:
我有这个功能:
export function em(value: number) {
return unit * value;
}
我现在在样式表中使用它:
headerHeight: em(6),
headerImageWidth: em(3),
headerImageHeight: em(3),
headerLogoHeight: em(6),
headerLogoWidth: em(20),
平板电脑上的图片看起来不错,但现在智能手机上的图片太小了。 如果我理解正确,我需要使用dimensions.width在我的函数中设置适当的单位值?
我可以想到两种方式
使用flex
<View style={{flex:1}}>
<View style={{flex:0.2}}>
<Text>Header</Text>
</View>
<View style={{flex:0.8}} />
</View>
你提到过使用flex,但没有工作。 我不确定你是否如上所述使用它,尺寸应该与屏幕尺寸有关。
使用尺寸
如何使用Dimensions
模块。 它可用于获取窗口的width
和height
,您可以根据它设置高度
import {
Dimensions
} from 'react-native
const winWidth = Dimensions.get('window').width;
const winHeight = Dimensions.get('window').height;
header = {
height: winHeight * 0.2 // 20%
}
然后使用宽度和高度来设置标题的高度(例如,基于百分比)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.