如何从URL调整图像大小并在React Native上显示固定宽度？

不知何故，我无法弄清楚这一点。我尝试了几种可用的在线解决方案，但都没有工作。如何从URL调整图像大小并在React Native上显示固定宽度？

这是问题。我有一些我想堆叠在一起的宽幅图像。高度并不重要，但我希望它具有固定的宽度。出于某种原因，图像正在裁剪。

我希望它看起来像这样。例如，如果您将.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到固定的宽度，而不被裁剪？

来源

2017-09-20 Iggy

使用resizeMode ='包含'而不是覆盖并指定宽度和高度。

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

来源

2017-09-22 06:29:18

如何从URL调整图像大小并在React Native上显示固定宽度？

回答

相关问题