React Native 中 resizeMode='contain' 的 ImageBackground 的位置

Question

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

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

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

图像以正确的方式渲染，但问题是它是垂直居中的，相反我想让它顶部对齐......

这是我的 ImageBackground 结果的示例

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

Answer 1

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

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