图像背景调整大小模式答案

【问题标题】：ImageBackground ResizeMode图像背景调整大小模式
【发布时间】：2018-01-01 14:06:49
【问题描述】：

我最近更新了 React-native，它引入了一个警告，代码如下：

 <Image
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </Image>

还有警告：

index.ios.bundle:50435 不推荐将与子项一起使用，并且在不久的将来将是一个错误。请重新考虑布局或请改用。

问题是当我使用 ImageBackground 组件时，它会警告我不能使用 ResizeMode 样式。

 <ImageBackground
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </ImageBackground>

还有警告：

警告：失败的道具类型：无效的 props.style 键“resizeMode” 提供给“视图”。坏对象：{ ResizeMode：'包含，高度：25，宽度：25}

您应该如何使用 ImageBackgrounds？网上似乎没有任何关于它的文档。

【问题讨论】：

我认为问题是您在图像块中有一个文本块。尝试修复它。是否有帮助

标签： javascript image react-native jsx

【解决方案1】：

ImageBackground 接受两个样式属性——style 和 imageStyle——它们（显然）分别应用于内部 View 和 Image。还值得注意的是，容器样式的高度和宽度值会自动应用于图像样式。详情请访问this。

【讨论】：

不，不明显，一点也不明显。

【解决方案2】：

将resizeMode: 'contain'移到内联style之外。

例子：

   <ImageBackground
          source={require('../../assets/icons/heart.png')}
          resizeMode= 'contain'
          style={{
            height: 25,
            width: 25
          }}
        >
        <Text>foobar</Text>
    </ImageBackground>

【讨论】：

【解决方案3】：

我确实遇到了这个问题；我最终放弃了 <ImageBackground> 并重新使用 <Image> 但删除了其中的元素。然后我将整个东西包裹在一个新的<View> 标签中，并将<Image> 绝对定位在样式中。如果有用的话，这就是我的代码结束的地方：

JSX

render() {
    return (
      <View style={{ alignItems: 'center' }}>
        <Image
          source={require('../images/pages/myImage.jpg')}
          style={styles.backgroundImage}
        />

风格

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');

const styles = StyleSheet.create({

  backgroundImage: {
   flex: 1,
   position: 'absolute',
   resizeMode: 'cover',
   width: viewportWidth,
   height: viewportHeight,
   backgroundColor: 'transparent',
   justifyContent: 'center',
   alignItems: 'center'
  },

【讨论】：

如果我能给这个超过一票，我会的。我已经绞尽脑汁 3 天了，试图弄清楚为什么我的 ImageBackground 在调试中有效，但在发布时无效。此解决方案适用于两者。谢谢！