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;

Answer 2

我刚刚浏览了您的查询，我认为如果您尝试使用"维度"会很棒。维度是另一个重要的参数，由反应原生它自己提供。您需要做的只是在组件中导入维度。

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

上面的命令将根据设备的高度和宽度设置，无论是iPhone还是Android。

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

干杯:)

Answer 3

您可以使用

vw 或 vh 来设置尺寸。

例如：高度："90VH"，宽度："50Vw"将相应元素的高度90%设置为窗口大小和宽度50%。

希望这有帮助。