反应原生图像位置

Question

有没有办法在resizeMode 设置为cover 时控制图像位置？我正在寻找可以通过在传统 CSS 中使用 background-positon: center bottom 来实现的类似结果。

下面是这种情况的说明：

1. 与屏幕尺寸相同的图像
2. 图片具有自定义高度，图片居中
3. （所需）具有自定义高度的图片，但图片与元素的底部边缘对齐

我的代码：

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

Answer 1

我相信您必须通过在图像样式上使用transforms 属性并利用translateY 转换来实现这一点。

这将涉及一些数学...我想你需要按照以下步骤操作：

1. 使用 Image.getSize() 查找图像的尺寸

2. 然后根据Dimensions.get('window') 的窗口大小计算您的图像将缩放到多少像素。

3. 找出显示的高度（例如 667 像素）和所需的图像高度（在您的示例中为 300 像素）之间的差异

4. 然后将图像向上平移那么多像素。