图像背景调整大小模式

Posted 2023-02-21

【中文标题】图像背景调整大小模式

【英文标题】：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？网上似乎没有任何关于它的文档。

【问题讨论】：

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

【参考方案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 在调试中有效，但在发布时无效。此解决方案适用于两者。谢谢！