有没有一种方法可以将resizeMode
设置为cover
来控制图像位置?我正在寻找与在传统CSS中使用background-positon: center bottom
可以实现的类似结果。
这是这种情况的说明:
与屏幕尺寸相同的图像
具有自定义高度的图像,图片居中
(所需)具有自定义高度的图片,但图片与元素的底部边缘对齐
我的代码:<Image source={require('./eifell.jpg')} resizeMode={Image.resizeMode.cover} style={{ height: 300 }}/>
最佳答案
我相信您必须通过在图像样式上使用transforms
道具并利用translateY
转换来实现此目的。
这将涉及一些数学运算……我想不起来,我相信您需要遵循以下步骤:
使用Image.getSize()查找图像的尺寸
然后根据Dimensions.get('window')
中窗口的大小,计算图像将缩放到多少像素。
找出显示的高度(例如667像素)与所需图像高度(在您的示例中为300像素)之间的差异
然后将图像平移那么多像素。