如何在ImageBackground组件中定位图像？

Question

我只想使用 React Native 的 ImageBackground 组件将此图像放置到屏幕顶部，使用此背景图像

resizeMode='contain'

（不是覆盖），因为图像适合尺寸，现在我需要将其放置在顶部。

找到了一些像这样的解决方案：- https://stackoverflow.com/a/55674160/21163479

但似乎不起作用。

这是我的代码：-

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

它看起来是这样的：-

Answer 1

从代码中删除 imageStyle。

这是代码：-

import { Text, SafeAreaView, ImageBackground, View } 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'
    }]}>
    <Text>--CONTENT HERE--</Text>
  </ImageBackground>
</SafeAreaView>
)
}

export default Login