如何在React Native的ImageBackground组件中定位图片至顶部？

我需要用React Native的ImageBackground组件将背景图片放在屏幕顶部，且必须设置resizeMode='contain'（不能用cover）。目前图片尺寸已适配，但始终无法定位到顶部，试过相关解决方案但无效。

我的代码 #

import { Text, SafeAreaView, ImageBackground } from 'react-native'
import React from 'react'

const Login = () => {
  return (
    <SafeAreaView style={[{flex: 1}]}>
      <ImageBackground
        source={require('../assets/img/auth-bg.jpg')}
        resizeMode='contain'
        style={[{
          flex: 1,
          justifyContent: 'flex-start',
          backgroundColor: 'pink'
        }]}
        imageStyle={[{ resizeMode: 'contain', alignSelf: 'flex-start' }]}
      >
        <Text>--CONTENT HERE--</Text>
      </ImageBackground>
    </SafeAreaView>
  )
}

export default Login

当前效果 #

解决方法 #

问题核心是给ImageBackground设置了flex:1，导致组件占满整个屏幕空间，而resizeMode='contain'默认会让图片在这个空间内居中显示，因此置顶设置失效。可以通过以下两种方式修改：

方式一：移除flex:1，让组件高度匹配图片实际尺寸 #

import { Text, SafeAreaView, ImageBackground } from 'react-native'
import React from 'react'

const Login = () => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'pink' }}>
      <ImageBackground
        source={require('../assets/img/auth-bg.jpg')}
        style={{
          width: '100%',
          justifyContent: 'flex-start'
        }}
        imageStyle={{
          resizeMode: 'contain',
          alignSelf: 'flex-start'
        }}
      >
        <Text>--CONTENT HERE--</Text>
      </ImageBackground>
    </SafeAreaView>
  )
}

export default Login

方式二：使用绝对定位强制图片置顶 #

如果需要ImageBackground仍占满屏幕空间但图片置顶，可给imageStyle添加绝对定位：

import { Text, SafeAreaView, ImageBackground } from 'react-native'
import React from 'react'

const Login = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ImageBackground
        source={require('../assets/img/auth-bg.jpg')}
        style={{
          flex: 1,
          backgroundColor: 'pink'
        }}
        imageStyle={{
          resizeMode: 'contain',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        }}
      >
        <Text>--CONTENT HERE--</Text>
      </ImageBackground>
    </SafeAreaView>
  )
}

export default Login

两种方法都能实现resizeMode='contain'前提下图片固定在屏幕顶部的需求。

内容的提问来源于stack exchange，提问作者Reacting