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

时间:2017-10-07 09:42:52

标签: android ios image react-native

在本机反应中,我渲染图像如下代码:

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

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

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

如何计算W,H,图像高度和图像宽度?

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

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