React Native Image Position

Question

Is there a way how to control image position with resizeMode set to cover? I'm looking for similar result as can be achieve by using background-positon: center bottom in traditional CSS.

Here is an illustration of the situation:

1. Image with same dimensions as screen
2. Image with custom height, picture gets centered
3. (Desired) Image with custom height, but with picture aligned to the bottom edge of the element

中强制使用绝对网址

我的代码：

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

Answer 1

我相信您必须通过在图片样式上使用transforms道具并使用translateY转换来实现这一目标。

这将涉及一些小数学......我认为你需要遵循以下步骤：

1. 使用Image.getSize（）查找图片的尺寸

2. 然后根据Dimensions.get('window')窗口的大小计算图片缩放的像素数。

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

4. 然后将图像翻译成许多像素。