使用resizeMode = contains时的图像对齐-Java 学习之路

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

enter image description here

红色框表示Image元素设置为100x50 . 笔记本电脑pic代表可变宽度/高度图片 . 您会注意到行为是将所有内容都垂直或水平推动 .

在第二个例子中，我希望图片占据高度的100％，并且大约一半宽度被推动左对齐 . 这可能吗？

谢谢！

3 回答

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

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：'contains'应用于样式表中的styles.logo .

希望这能节省一些时间 .

回复于 2024-05-05T04:56:42+08:00

5

这很有可能，但不要指望反应原生照顾一切 . 您可能希望编写一个小算法来实现此目的 . resizeMode="contain" 的作用是检查图像的大小是否大于/小于容器 . 如果它大于容器，它将调整大小以适合容器 . 如果它小于容器，它将按原样呈现 .

关于图像的对齐，反应原生并不真正关心 . 图像放置在容器的中间 . 如果要将图像左对齐放置，则必须编写一个小算法，该算法会比较图像的实际尺寸和容器的尺寸 .

例如 . 如果图像的高度大于容器，请将图像的高度设置为等于容器的高度，并使用"aspect ratio"计算容器的宽度 . Read this以清楚地了解您将要做的事情 .

此外，请使用 position: 'absolute' 以更好地满足您的需求 . 祝好运！

Edit: 很抱歉没有为您提供现成的解决方案 . 您可能会在谷歌上找到所需的算法 . 我只是朝着正确的方向推开你 .

回复于 2024-05-05T04:56:42+08:00

我通过以下方式解决了类似的任务 . 首先，您需要设置初始图像样式：

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

这将呈现我们想要在特定onLayout回调中捕获的Image的原始大小 . 所以诀窍是以下列方式实现该回调：

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是图像容器的恒定高度 . 现在，您只需使用状态替换初始图像样式：

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

而已 . 在您的情况下，您可能还需要在另一个视图中包装图像 . 希望这会有所帮助 .

祝好运！

回复于 2024-05-05T04:56:42+08:00

使用resizeMode = contains时的图像对齐

3 回答

相关问题