React Native：图像 "contain" 的行为与 "cover" 相同

Question

我有以下图像，我想将其作为 header 放在我的 React Native 应用程序中：

我希望 <ScrollView> 中的所有文本都排在 header 后面。我已经能够使用以下代码执行此操作：

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>
    );
  }
}

看起来像这样：

左侧的绿色条定义 header 的高度。问题是 <BackgroundImage> 会垂直拉伸以适合 header 容器，并从侧面溢出，即使我指定了 resizeMode: cover.

我想知道的：

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

Answer 1

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

Answer 2

不是在样式中提供 resizemode，而是将其用作：-

<ImageBackground resizeMode={"contain"} />

Image 和 ImagebackGround 具有不同的属性。

React Native：图像 "contain" 的行为与 "cover" 相同

React Native: Image "contain" is behaving the same as "cover"

reactjs

react-native

react-native-image