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.

我想知道的：

如何使背景图像水平压缩以适合屏幕？

Answer 1

<ImageBackground /> 不起作用，因为<Image />包含resizeMode不起作用，您可以为父视图提供固定的高度和宽度，<ImageBackgroud/>也可以使用<Image />绝对位置来实现这一点。

Answer 2

而不是给 resizemode 内部样式使用它： -

<ImageBackground resizeMode={"contain"} />

Image 和 ImagebackGround 具有不同的属性。