react-native - 使用 resizeMode = 包含时的图像对齐

Question

我正在使用 React Native 的 Image 标签来显示具有可变宽度和高度的图像。我已将图像设置为 100x50 并设置 resizeMode = contains，这几乎完美地工作，但是如果图像被调整大小，它会在垂直和水平方向完全居中。这种行为可以改变吗？样机截图:



红色框表示图像元素设置为 100x50。笔记本电脑图片代表可变宽度/高度图片。您会注意到该行为正在垂直或水平地插入所有内容。

在第二个示例中，我希望将占据 100% 高度和大约一半宽度的图片左对齐。这可能吗？

谢谢!

Answer 1

全部 - 为了将来可能节省一些时间，这是我想出的一种快速而肮脏的方法来解决这个问题:

logoSize(width, height) {
  var maxWidth = 110;
  var maxHeight = 30;

  if (width >= height) {
    var ratio = maxWidth / width;
    var h = Math.ceil(ratio * height);

    if (h > maxHeight) {
      // Too tall, resize
      var ratio = maxHeight / height;
      var w = Math.ceil(ratio * width);
      var ret = {
        'width': w,
        'height': maxHeight
      };
    } else {
      var ret = {
        'width': maxWidth,
        'height': h
      };
    }

  } else {
    var ratio = maxHeight / height;
    var w = Math.ceil(ratio * width);

    if (w > maxWidth) {
      var ratio = maxWidth / width;
      var h = Math.ceil(ratio * height);
      var ret = {
        'width': maxWidth,
        'height': h
      };
    } else {
      var ret = {
        'width': w,
        'height': maxHeight
      };
    }
  }

  return ret;
}

这将获取图像的宽度和高度，运行一些比率计算，并根据顶部的 maxWidth 和 maxHeight 变量吐出一组尺寸。然后，您可以采用上述方法为您提供的尺寸并将其应用于 Image 元素，例如:

var dims = logoSize(244,127);
<Image style={[styles.logo, {width:dims.width, height:dims.height}]} source={{uri:'/path/to/image.png}} />

由于计算四舍五入，您可能需要将 resizeMode:'contain' 应用于样式表中的 styles.logo。

希望这可以节省一些时间。