如何從URL調整圖像大小並在React Native上顯示固定寬度？

Question

不知何故，我無法弄清楚這一點。我嘗試了幾種可用的在線解決方案，但都沒有工作。

這是問題。我有一些我想堆疊在一起的寬幅圖像。高度並不重要，但我希望它具有固定的寬度。出於某種原因，圖像正在裁剪。

我希望它看起來像這樣。例如，如果您將.meat的高度更改爲10px，它將調整大小但將保持其比率。

http://jsfiddle.net/iggyfiddle/mtL7e2jz/

這是圖像的代碼：

{items.map((item, index) => 
    <View key={index}> 
     <View style={styles.imageWrapper}> 
     { item.image_url_large && <Image style={styles.image} resizeMode='cover' source={{ uri: item.image_url_large }} /> } 
     </View> 
    </View> 
)} 

它通過多個圖像的陣列的映射。

我曾嘗試：

簡單

const的樣式= { 圖像：{ 高度：100 }， };

我嘗試以下的小提琴相同的圖案，通過給予本SO post

const styles = { 
    imageWrapper: { 
    height: 50, 
    width: 400 
    }, 
    image: { 
    height: '100%' 
    }, 
}; 

固定的高度和寬度，但它仍作物頂髻和番茄

我嘗試了一些在GH discussion上描述的解決方案，但它們似乎不起作用。

我怎樣才能自動調整大小的圖像從web到固定的寬度，而不被裁剪？

Answer 1

使用resizeMode ='包含'而不是覆蓋並指定寬度和高度。

<Image 
    style={{width:300,height:300}} 
    source={{ uri: display_image_small }} 
    resizeMode='contain'> 
</Image>