React Native响应式标题栏高度

Question

我正在尝试设置标题的高度，以使其对平板电脑和智能手机具有响应性。我已经尝试使用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 在我的函数中设置适当的单位值？

智能手机

平板电脑

- Bomber

---

你需要使用'react-native'中的'Dimensions'模块，并在运行时修改你的样式。响应式设计就像react-native一样。这里有一篇不错的文章：https://medium.com/@elieslama/responsive-design-in-react-native-876ea9cd72a8 - MaieonBrix

Answer 1

我可以想到两种方法。

使用flex布局。

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

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

- coder hacker