圖片不能正常顯示

這是我怎麼顯示的圖片是這個樣子的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會照顧，但它在這裏沒有幫助。我想要的是整個圖像沒有任何額外的利潤。

請幫忙。謝謝。

來源

2017-08-03 Somename

看起來像寬比的問題在這裏，'contain'否則將完全如果圖像是工作它需要包含的包含元素的確切比例。 – UncaughtTypeError

我認爲你必須選擇剪裁還是拉伸。 –

@Ihazkode是不是有沒有辦法顯示整個圖像而不必裁剪/拉伸？我可以舒展，但它爲什麼只顯示它的一部分？ – Somename

您可以使用cover，但它會裁剪圖像的一部分。

爲了使它工作，你需要一個高度屬性添加到您的形象：

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

來源

2017-08-03 09:27:29

它裁剪圖像很多。我想顯示整個圖像沒有額外的邊距。 – Somename

如果您的圖像沒有相同的屏幕尺寸，則無法進行此操作。您可以擺脫頂部邊距，但下面的空白區域將繼續。 –

圖片不能正常顯示

回答

相關問題