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

导致：

撤回看不到内部的视图似乎解决了这个问题。 当删除resizeMode.contain规则和/或使用封面或拉伸背景中的图片缩放到实际大小时，它忽略了大小。

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

  },
})

在高度上设置所需的大小。