我正在使用React Native的Image标签来显示宽度和高度可变的图像。我已将图像设置为100x50并设置resizeMode = contains几乎完美,但是如果图像调整大小,它会完全垂直和水平居中。这种行为可以改变吗?样机截图:
红色框表示Image元素设置为100x50。笔记本电脑pic代表可变宽度/高度图片。你会注意到这种行为正在将所有事物都垂直或水平地推中心。
在第二个例子中,我希望图片占据高度的100%,并且大约一半的宽度要被推左对齐。这可能吗?
谢谢!
答案 0 :(得分:5)
全部 - 为了将来节省一些时间,这是我想出来解决这个问题的一种快速而肮脏的方法:
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}} />
&#13;
由于计算轮次,您可能需要应用resizeMode:&#39;包含&#39;到样式表中的styles.logo。
希望这能节省一些时间。
答案 1 :(得分:1)
很有可能,但不要指望本地反应可以照顾到一切。您可能希望编写一个小算法来实现此目的。 resizeMode="contain"
的作用是检查图像的大小是否大于/小于容器。如果它大于容器,它将调整大小以适合容器。如果它小于容器,它将按原样呈现。
关于图像的对齐,反应原生并不真正关心。图像放置在容器的中间。如果要将图像左对齐放置,则必须编写一个小算法,该算法会比较图像的实际尺寸和容器的尺寸。
例如。如果图像的高度大于容器,请将图像的高度设置为等于容器的高度,并使用“纵横比”计算容器的宽度。 Read this以清楚了解您将要做的事情。
另外,与position: 'absolute'
一起玩,以更好地满足您的需求。祝好运!
修改:很抱歉没有为您提供现成的解决方案。您可能会在谷歌上找到所需的算法。我只是朝着正确的方向推开你。
答案 2 :(得分:1)
我通过以下方式解决了类似的任务。首先,您需要设置初始图像样式:
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) }
/>
就是这样。在您的情况下,您可能还需要在另一个视图中包装图像。希望这会有所帮助。
祝你好运!