ImageBackground ResizeMode

Question

我最近更新了React本机，它引入了一个警告，并使用了以下代码：

 <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？网上似乎没有关于它的任何文件。

Answer 1

ImageBackground接受两种风格的道具--风格和imageStyle --它们(显然)分别应用于内部视图和图像。还值得注意的是，来自容器样式的高度和宽度值自动应用于图像样式。有关详细信息，请访问这。

Answer 2

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

示例：

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

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