React Native：图像“包含”的行为与“覆盖”相同答案

【问题标题】：React Native: Image "contain" is behaving the same as "cover"React Native：图像“包含”的行为与“覆盖”相同
【发布时间】：2020-07-11 13:31:29
【问题描述】：

我想在我的 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。

我想知道的：

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

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/12991351/…

标签： reactjs react-native react-native-image

【解决方案1】：

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

【讨论】：

嗨 Ramashish，谢谢，这确实回答了我的问题。如果您对此有任何见解，我会在此处再发布一个 (stackoverflow.com/questions/60946102/…)，我将不胜感激。
@gkeenley 当然我很乐意帮忙，但是，

【解决方案2】：

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

<ImageBackground resizeMode={"contain"} />

Image 和 ImagebackGround 具有不同的属性。

【讨论】：

嗨，Bhavya，谢谢，这帮助我解决了这个问题。我不得不批准 ramashish，因为他首先得到了它，但我感谢你的帮助并投票赞成。如果您对此有任何见解，我会在此处再发布一个 (stackoverflow.com/questions/60946102/…)，我将不胜感激。