React Native - 使用 resizeMode“包含"垂直对齐图像 [英] React Native - Vertical align image with resizeMode "contain"

问题描述

当图像具有包含"调整大小模式时，它似乎在中心对齐/对齐实际图像，但是图像内容在 flex 开始时对齐/对齐.

When an image has a resize mode "contain" it seems to align/justify the actual image in the center, the image content however is aligned/justified at flex start.

<Image resizeMode="contain" ...>
<Text>Title</Text>
</Image>

通过以下内容，我看到文字出现在图像上方.

With the following I'm seeing the text appearing above the image.

有没有办法将包含的图像垂直对齐到顶部?

Is there any way to vertically align the contained image to top ?

推荐答案

Using resizeMethod="resize"

我找到了一个不需要任何额外标签或技巧的解决方案.只有一个道具.

Using resizeMethod="resize"

I've found a solution that doesn't requires any extra tags or tricks. Just one single prop.

知识

我遇到了同样的问题，因为我在遥控器上的图像是常规尺寸的 @3 倍.一旦使用 { height: 100, width: 300, resizeMode: 'contain' } 样式值加载到手机上，它会自动居中.

I had the same issue because my image on remote is @3x the regular size. And once loaded on the phone with { height: 100, width: 300, resizeMode: 'contain' } styling values, it centered automatically.

示例

为了修复它，我刚刚添加了道具 resizeMethod，如下所示:

To fix it, I've just added the prop resizeMethod like the following :

<Image
  style={{ height: 100, width: 300, resizeMode: 'contain' }}
  source={{ uri: 'https://www.fillmurray.com/900/300' }}
  resizeMode="contain"
  resizeMethod="resize"
/>

希望有帮助！

这篇关于React Native - 使用 resizeMode“包含"垂直对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！