使用resizeMode = contain时图像对齐

Question

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

​

​

红色方框表示图像元素设置为100x50。膝上型pic表示可变宽度/高度图片。您将注意到，该行为将所有内容垂直或水平居中。

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

谢谢!

Answer 1

All -为了在未来可能节省一些时间，这是我想出的一个快速而肮脏的方法来解决这个问题：

​

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变量的尺寸。然后，您可以获取上述方法给出的尺寸，并将其应用于图像元素，例如：

​

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

​

由于计算是循环的，您可能需要对样式表中的styles.logo应用resizeMode:'contain‘。

希望这能节省一些人的时间。

Answer 2

我用下面的方法解决了一个类似的任务。首先，您需要设置初始图像样式：

​

initialImageStyle : { flex:1, resizeMode:'cover' }

​

这将以我们想要在特定onLayout回调中捕获的原始大小呈现图像。因此，技巧是以以下方式实现该回调：

​

onLayout (e) {
		
	if (this.state.imageSize) { return }
	
	const { x, y,
		height,
		width }		= e.nativeEvent.layout,
		sizeX 		= width - x,
		sizeY 		= height - y,
		imageWidth 	= (sizeX / sizeY) * IMAGE_HEIGHT

	this.setState ({ imageSize: { height: IMAGE_HEIGHT, width: imageWidth, resizeMode: 'contain', }})
}

​

其中IMAGE_HEIGHT是图像容器的恒定高度。现在，您所要做的就是使用state替换初始图像样式：

​

<Image
  style={ this.state.imageSize || styles.initialImageStyle }
  source={ /* your image */ }
  onLayout={ this.onLayout.bind (this) }
/>

​

就这样。在您的情况下，您可能还需要在附加视图中包装图像。希望这能有所帮助。

祝好运!

Answer 3

这是很有可能的，但不要指望react-native会处理所有的事情。您可能想要编写一个小算法来实现这一点。resizeMode="contain"所做的是检查图像的大小是否大于或小于容器。如果它大于容器，则会调整其大小以适合容器。如果它比容器小，它将按原样渲染。

关于图像的对齐，react-native实际上并不关心。图像被放置在容器的中间。如果你想让图像左对齐，你必须编写一个小的算法来比较图像的实际尺寸和容器的尺寸。

例如。如果图像的高度大于容器，则将图像的高度设置为容器的高度，并使用宽高比计算容器的宽度。Read this可以清楚地了解您需要做什么。

此外，使用position: 'absolute'可以更好地满足您的需求。祝好运!

编辑：很抱歉没有为您导出现成的解决方案。不过，您可能会在google上找到所需的算法。我只是把你推到了正确的方向。