React原生响应标头高度

Question

我试图设置我的标题高度,以便对平板电脑和智能手机做出响应.我已经尝试过使用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在我的函数中设置适当的单位值？

手机

片剂

Answer 1

我可以想到两种方式

使用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%
}

然后使用宽度和高度来设置标题的高度(例如,基于百分比)