在 React Native 中具有 resizeMode='contain' 的 ImageBackground 的位置 [英] Position of an ImageBackground with resizeMode='contain' in React Native

问题描述

我是 React-native 的新手，我有一个非常简单的问题(至少我是这么认为的).

I'm new to React-native and I've a very simple(at least i think so) problem.

我有一个带有 resizeMode='contain' 的 ImageBackground，现在我想将背景定位到容器的顶部...

I've an ImageBackground with resizeMode='contain', now I would like to have the background positioned to the top of the container...

<ImageBackground style={styles.imageBackground} source={backgroundImage} resizeMode='contain'> 
... some content 
</ImageBackground>

图像以正确的方式呈现，但问题是它垂直居中，而不是我想让它顶部对齐...

The image is rendered in the right way, but the problem is that it is vertically centered, instead I would like to have it top aligned...

这是我的ImageBackground的结果示例

这是将底部添加到ImageStyle的结果示例

推荐答案

在 ImageBackground 组件中，图像不是垂直居中，而是绝对定位以填充容器.您可以在此处查看源代码.它出现垂直居中的原因可能是因为 resizeMode contain.要顶部对齐，您可以让用户使用道具 imageStyle，您可以将其设置为如下所示:

In the ImageBackground component, the image isn't vertically centered, rather it is positioned absolutely to fill the container. You can check the source here. The reason it's appearing vertically centered is probably because of the resizeMode contain. To top align it, you can make user of the prop imageStyle that you can set to something like this:

<ImageBackground
    imageStyle={{
        bottom: 40 // Whatever offset you want from the bottom
    }}
/>

这篇关于在 React Native 中具有 resizeMode='contain' 的 ImageBackground 的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！