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

时间:2017-02-11 09:19:36

标签: javascript react-native

我希望视图在不同尺寸(适用于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);

或者可以有更好的解决方案?谢谢。

3 个答案:

答案 0 :(得分:4)

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

首先导入尺寸

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;

答案 1 :(得分:2)

我刚刚完成了您的查询,我认为如果您尝试使用“尺寸”会很棒。尺寸是另一个重要的参数,它由本身的反应提供。您需要做的只是导入组件中的维度。

var {height, width} = Dimensions.get('window');

以上命令将设置设备的高度和宽度,无论是iphone还是android。

只需点击链接:https://facebook.github.io/react-native/docs/dimensions.html

即可

干杯:)

答案 2 :(得分:0)

您可以使用vw或vh设置尺寸。

例如:height:“ 90vh”,width:“ 50vw”会将元素的高度设置为窗口大小的90%,宽度设置为50%。

希望这会有所帮助。