不尊重限制的圖片

Question

根據documentation on Image，您可以使用resizeMode將圖片包含在其容器（在本例中爲視圖）中。

我的代碼是這樣的：

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

然而，我所得到的是這樣的：

我希望徽標以縮小到適合紫色的盒子內。我可以通過在圖像上指定一個較寬的寬度來解決這個問題，但我不想這麼做，因爲它在所有手機尺寸上都應該看起來不錯。我基本上希望圖像伸展到其包含的視圖的100％。我該怎麼做呢？

Answer 1

圖像組件本身就是一個視圖（或框模型佈局框）。既然你沒有給它一個大小，它只是增長以適應它的內容。在這種情況下，它是大到適合它的父母和溢出。

因此，您要麼顯式地給圖像所需的寬度和高度，要麼使用flex：1.在這種情況下，必須給容器一個flexDirection：'row'。