反应原生图像包含空白空间

Question

在本机反应中，我渲染图像如下代码：

<Image
    source={{
      uri: downloadDest,
      scale: 1
    }}
      style={styles.image}
      resizeMode='contain'
  >
</Image>

image: {
   flex: 1,
   backgroundColor: 'blue',
},

此代码呈现如下图像，在这种情况下，我需要在图像和父视图之间计算空填充。

如何计算W，H，图像高度和图像宽度？

Answer 1

• resizeMode是Style prop。
• 如果您想优先填补图像质量的空白，请尝试resizeMode：'stretch'或'cover'。

这应该有效：

<Image
    source={{
      uri: downloadDest,
      scale: 1
    }}
      style={styles.image}
  >
</Image>

image: {
   flex: 1,
   resizeMode: 'cover', //or stretch/contain
   backgroundColor: 'blue',
},