reactjs - 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

私が知りたいこと:

背景画像を横方向に画面に収まるように圧縮するにはどうすればよいですか?