React Native: изображение «содержать» ведет себя так же, как «обложка»

Question

У меня есть следующее изображение, которое я хочу использовать в качестве заголовка в своем приложении React Native:

Я хочу, чтобы весь текст был в моем <ScrollView>, чтобы течь за этим заголовком. Я смог сделать это с помощью следующего кода:

import React, { Component } from 'react';
import { Text, View, ScrollView, ImageBackground} from 'react-native';

export default class Login extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
          <View
            style={{
              position: "absolute",
              width: "100%",
              top: 0
            }}
          >
            <ImageBackground
              source={require('../../images/swoord-top.png')}
              style={{
                flex: 1,
                resizeMode: "contain",
                justifyContent: 'center'
              }}
            >
              <View style={{
                backgroundColor: 'green',
                height: 500,
                width: 25
              }}></View>
            </ImageBackground>
          </View>
        <ScrollView style={{backgroundColor: 'pink', zIndex: -1}}>
        <Text style={{fontSize: 42}}>
          Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor
        </Text>
      </ScrollView>
      </View>
    );
  }
}

Это выглядит так:

Зеленый Панель слева определяет высоту заголовка. Проблема в том, что <BackgroundImage> растягивается, чтобы соответствовать контейнеру заголовка по вертикали, и разливается по сторонам, хотя я указал resizeMode: cover.

Что я хочу знать:

Как заставить фоновое изображение сжимать, чтобы оно умещалось на экране по горизонтали?

Answer 1

<ImageBackground /> не работает как <Image />, поэтому resizeMode Содержимое не будет работать, вы можете либо задать фиксированную высоту и ширину родительскому представлению <ImageBackgroud/>, либо вы можете использовать <Image /> с абсолютной позицией для достижения это.

Answer 2

В вместо того, чтобы давать режим изменения размера внутри стиля, используйте его как: -

<ImageBackground resizeMode={"contain"} />

Image и ImagebackGround имеют разные свойства.