React Native image：為什么當設置為“包含”時父視圖與“覆蓋”保持相同的高度？

Question

我的 React Native 應用程序中有以下圖像

我想將此圖像放在父元素內，其上方或下方沒有空間，並且我希望圖像不會超出屏幕的左側或右側

當我有這樣的代碼時

<View style={{
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
}}>
    <Image
        style={{
            width: '100%'
        }}
        source={require('@images/swoosh-02.png')}
    />
</View>

我明白了，因為resizeMode的默認值是cover

當我將其更改為此（添加resizeMode='contain' ）

<View style={{
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
}}>
    <Image
        style={{
            width: '100%'
        }}
        resizeMode='contain'
        source={require('@images/swoosh-02.png')}
    />
</View>

圖像成功水平包含，但父元素的高度與resizeMode為cover時的高度相同。

我怎樣才能得到它，以便父元素垂直收縮以僅包含圖像而沒有額外的頂部/底部填充？

Answer 1

包含和覆蓋之間的區別是：

resizeMode='contain' = 均勻縮放圖像（保持圖像的縱橫比），使圖像的兩個尺寸（寬度和高度）都等於或小於視圖的相應尺寸（減去填充）。

resizeMode='cover' = 均勻縮放圖像（保持圖像的縱橫比），使圖像的兩個尺寸（寬度和高度）都等於或大於視圖的相應尺寸（減去填充）。

也許您應該嘗試在視圖中應用高度。

閱讀這篇文章，應該對你有所幫助。