有没有一种方法可以将resizeMode设置为cover来控制图像位置?我正在寻找与在传统CSS中使用background-positon: center bottom可以实现的类似结果。

这是这种情况的说明:


与屏幕尺寸相同的图像
具有自定义高度的图像,图片居中
(所需)具有自定义高度的图片,但图片与元素的底部边缘对齐


react-native -  react 本地镜像位置-LMLPHP

我的代码:

<Image source={require('./eifell.jpg')} resizeMode={Image.resizeMode.cover} style={{ height: 300 }}/>

最佳答案

我相信您必须通过在图像样式上使用transforms道具并利用translateY转换来实现此目的。

这将涉及一些数学运算……我想不起来,我相信您需要遵循以下步骤:


使用Image.getSize()查找图像的尺寸
然后根据Dimensions.get('window')中窗口的大小,计算图像将缩放到多少像素。
找出显示的高度(例如667像素)与所需图像高度(在您的示例中为300像素)之间的差异
然后将图像平移那么多像素。

08-27 18:29