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

Question

我正在尝试在 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'
  }
})

结果:

移除 中的 View 似乎无法解决此问题。当删除 resizeMode.contain 规则和/或使用 cover 或 stretch 时，背景中的图片被缩放到实际大小，它忽略了大小。

Answer 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

  },
})

在高度中，您可以设置所需的尺寸。