图像显示不正确

Question

这就是我在React-Native:

中展示我的图片的方式

<View>
    <Text style={styles.myTitle}> This is the title 2 </Text> 
    <Image
      style={{ width: null}} 
      source={require('./images/05.jpg')}
      resizeMode="stretch"
    />
</View>

使用resizeMode="stretch"图像显示如下：

与resizeMode="contain"显示时的相同图片：

<View>
    <Text style={styles.myTitle}> This is the title 3</Text> 
    <Image
      style={{ width: null}} 
      source={require('./images/05.jpg')}
      resizeMode="contain"
    />
</View>

resizeMode="contain"：

我希望图像显示的方式与第二种类型相同，但是有不必要的边距：

第一张图像中的边距是完美的，但未显示完整图像。我一直以为contain会照顾到这一点，但它在这里没有帮助。我想要的只是显示整个图像而没有任何额外的边距。

请帮忙。感谢。

Answer 1

您可以使用cover，但它会裁剪部分图片。

要使其正常工作，您需要为图像添加高度属性：

  <View>
    <Text>This is the title 3</Text>
    <Image
      style={{ width: null, height: '100%' }}
      source={require('./image.png')}
      resizeMode="cover"
    />
  </View>