我正在使用 React Native 的 Image 标签来显示具有可变宽度和高度的图像。我已将 Image 设置为 100x50 并将 resizeMode = contains 设置为几乎完美的工作，但是如果调整图像大小，它会完全垂直和水平居中。这种行为可以改变吗？样机截图：
红色框表示设置为 100x50 的 Image 元素。笔记本电脑图片代表可变宽度/高度图片。您会注意到，该行为正在推动所有内容垂直或水平居中。
在第二个示例中，我希望将占据 100% 高度和大约一半宽度的图片推到左对齐。这可能吗？
谢谢！
【问题讨论】：
标签： react-native
这是很有可能的，但不要指望 react-native 会处理所有事情。您可能想编写一个小算法来实现这一点。 resizeMode="contain" 所做的是检查图像的大小是否大于/小于容器。如果它大于容器，它将调整大小以适合容器。如果它小于容器，它将按原样渲染。
关于图像的对齐方式，react-native 并不关心。图像放置在容器的中间。如果要将图像左对齐，则必须编写一个小算法来比较图像的实际尺寸和容器的尺寸。
例如。如果图像的高度大于容器，则将图像的高度设置为等于容器的高度，并使用“纵横比”计算容器的宽度。 Read this 清楚地了解您必须做什么。
另外，请使用position: 'absolute' 以更好地满足您的需求。祝你好运！
编辑：很抱歉没有为您提供现成的解决方案。不过，您可能会在 google 上找到所需的算法。我只是把你推向了正确的方向。
【讨论】：
Image.getSize
所有 - 为了将来可能节省一些时间，这是我想出的一种快速而肮脏的方法来解决这个问题：
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' 应用于样式表中的样式。
希望这可以节省一些时间。
【讨论】：
我通过以下方式解决了类似的任务。首先你需要设置初始的图片样式：
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 是图像容器的恒定高度。现在您所要做的就是使用状态替换初始图像样式：
<Image
style={ this.state.imageSize || styles.initialImageStyle }
source={ /* your image */ }
onLayout={ this.onLayout.bind (this) }
/>就是这样。在您的情况下，您可能还需要将图像包装在附加视图中。希望这会有所帮助。
祝你好运！
【讨论】：