Image.resizeMode.contain 在元素上方创建空白空间

Posted 2023-05-07

【中文标题】Image.resizeMode.contain 在元素上方创建空白空间

【英文标题】：Image.resizeMode.contain creates empty space above element

【发布时间】：2015-12-23 04:46:43

【问题描述】：

我正在 android 上尝试 React Native，但是当使用 Image.resizeMode.contain 制作全屏背景时，React native 会在我的元素上方创建一个空白空间。

代码：

render: function() 
  return (
    <View style=Styles.restaurant_container>
      <Image
        style=Styles.backdrop
        resizeMode=Image.resizeMode.contain
        source=require('image!login_background')>
          <View style=Styles.backdropView>
            <Text style=Styles.headline>Headline</Text>
          </View>
      </Image>
    </View>
  );

风格：

var Styles = StyleSheet.create(
  restaurant_container: 
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#000000',
  ,
  backdrop: 
    flex: 1,
    paddingTop: 60
  ,
  backdropView: 
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0)',
    alignItems: 'center'
  ,
  headline: 
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(240,240,240,0.7)',
    color: 'Black'
  
)

结果：

删除内部的视图似乎并不能解决这个问题。 当删除 resizeMode.contain 规则和/或使用覆盖或拉伸背景中的图片被缩放到实际大小时，它会忽略大小。

【参考方案1】：

主要问题是 resizeMode = "contain" 不会降低图像的高度并将其居中在其原始大小内。 一种解决方案是设置图像的高度和宽度并移除resizeMode。 所以你的代码将是：

render: function() 
  return (
    <View style=Styles.restaurant_container>
      <Image
        style=Styles.backdrop
        source=require('image!login_background')>
          <View style=Styles.backdropView>
            <Text style=Styles.headline>Headline</Text>
          </View>
      </Image>
    </View>
  );

你的风格会是这样的：

var Styles = StyleSheet.create(
  backdrop: 
    flex: 1,
    paddingTop: 60,
    width: null,
    height: 400

  ,
)

您设置所需的高度。