Как я могу визуализировать текст внутри изображения в React Native?

Question

Я хочу визуализировать текстовый компонент внутри компонента ImageBackground.

Я пробовал

<ImageBackground
    source={{uri: smartPaperData.backgroundImage}}
    resizeMode="contain"
    resizeMethod="scale"
    style={{
         height: '100%',
         width: undefined,
         backgroundColor: 'yellow',
    }}>
            <Text>Hello</Text>
</ImageBackground>

Используя приведенный выше код, я получаю именно это. (Вы можете видеть привет слева вверху)

введите описание изображения здесь

Мне нужно, чтобы текст Hello появился в верхнем левом углу изображения, но текст идет где-то еще.

Кто-нибудь может помочь мне разобраться в этом

Answer 1

ширина полностью зависит от размера необработанного изображения. вам нужно создать контейнер с фиксированной шириной, например

<View style={{width: '80%'}}>
   <ImageBackground
    source={{uri: smartPaperData.backgroundImage}}
    resizeMode="contain"
    resizeMethod="scale"
    style={{
         height: '100%',
         width: '100%',
         backgroundColor: 'yellow',
    }}>
            <Text>Hello</Text>
</ImageBackground>
</View>