React Native-如何独立设置视图大小屏幕大小？

Question

我想让View在不同尺寸（对于Android 4+）和dpi（240+）以及iPhone 4+和iPad上看起来一样。当我定义尺寸时，例如 270x65，它在640 dpi的屏幕上看起来比在320 dpi的屏幕（2560x1600实际屏幕尺寸）上相同尺寸大一倍。

这是一个好的解决方案吗？

  containerButton: {
    width: calcDimension(270),
    height: calcDimension(65)
  }

const calcDimension = size =>
  size / (screenScale() > 2 ? (screenScale() / 2) : 1);

const screenScale = () =>
  (Dimensions.get('window').scale);

还是有更好的解决方案？谢谢。

Answer 1

您可以在react native中使用Dimensions以自动计算设备的高度和宽度。

首次导入尺寸

import { Dimensions, Platform, StyleSheet } from 'react-native

获取设备的高度和宽度

var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;

现在，您可以在样式中使用此全局变量。例如：

const styles = StylSheet.create({
     mainContainer: {
          height: deviceHeight/2;
          width: deviceWidth/2;
     }
});

您还可以动态计算状态栏的高度和宽度标准方式：

var STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 25;
var HEADER_HEIGHT = Platform.OS === 'ios' ? 44 + STATUS_BAR_HEIGHT : 44 + STATUS_BAR_HEIGHT;