我正在尝试设置标题高度,以便其响应平板电脑和智能手机。我尝试过使用弹性列:
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在我的函数中设置适当的单位值?
最佳答案
我可以想到两种方法
使用弹性
<View style={{flex:1}}>
<View style={{flex:0.2}}>
<Text>Header</Text>
</View>
<View style={{flex:0.8}} />
</View>
您提到过使用 flex,但不起作用。我不确定您是否像上面那样使用它,尺寸应该与屏幕尺寸相关。
使用尺寸
如何使用Dimensions
模块。它可用于获取窗口的宽度
和高度
,您可以根据该值设置高度
import {
Dimensions
} from 'react-native';
const winWidth = Dimensions.get('window').width;
const winHeight = Dimensions.get('window').height;
header = {
height: winHeight * 0.2 // 20%
}
然后使用宽度和高度设置标题的高度(例如基于百分比)
关于javascript - React原生响应式标题高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45462417/