图片不尊重约束

Question

根据documentation on Image，您可以使用resizeMode将图片包含在其容器中（在本例中为视图）。

我的代码是：

  <View style={{backgroundColor: '#ccf'}}>
    <Image
      resizeMode={Image.resizeMode.contain}
      source={require('../../../assets/ste-logo.png')}
    />
  </View>

然而我得到的是：

我希望徽标缩小到紫色框内。我可以通过在图像上指定硬宽度来解决此问题，但我不想这样做，因为它应该在所有手机尺寸上看起来都很好。我基本上希望图像延伸到其包含View的100％。我该怎么做？

Answer 1

Image组件本身就是一个视图（或关于盒子模型布局的框）。既然你没有给它一个大小，它就会增长以适应它的内容。在这种情况下，它会变大以适应它的父级和溢出。

因此，您要么显式地为Image提供所需的宽度和高度，要么使用flex：1。在这种情况下，必须为容器提供flexDirection：'row'。