Javascript 反应本地响应收割台高度

我正在尝试设置头部高度，以便对平板电脑和智能手机做出响应。我尝试过使用flex column：

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>

---

然后使用宽度和高度设置标题的高度（例如基于百分比）

您必须使用“react native”中的“Dimensions”模块，并在运行时修改样式。她是本地人。这是一本好书：

import {
  Dimensions
} from 'react-native
const winWidth = Dimensions.get('window').width;
const winHeight = Dimensions.get('window').height;


header = {
    height: winHeight * 0.2 // 20%
}