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

【问题标题】：Image.resizeMode.contain creates empty space above elementImage.resizeMode.contain 在元素上方创建空白空间
【发布时间】：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 规则和/或使用覆盖或拉伸背景中的图片被缩放到实际大小时，它会忽略大小。

【问题讨论】：

标签： android react-native

【解决方案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

  },
})

您设置所需的高度。

【讨论】：