ImageBackground ResizeMode

Question

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

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

以及警告：

指数网间网操作系统。捆绑：50435使用

问题是当我使用Imagebackground组件时，它会给我一个警告，即您不能使用ResizeMode样式。

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

以及警告：

警告：失败的道具类型：无效道具。为“视图”提供了样式键“resizeMode”。错误对象：{ResizeMode:'包含，高度：25，宽度：25}

你应该如何使用图像背景？网上似乎没有关于它的任何文档。

Answer 1

我就有这个问题,；我最终放弃了

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

Answer 2

将resizeMode:'contain'移动到内联样式之外。

例子：

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

Answer 3

图像背景接受两种风格道具——风格和图像风格——它们（显然）分别应用于内部视图和图像。还值得注意的是，容器样式中的高度和宽度值会自动应用到图像样式中。有关详细信息，请访问此。