如何从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 styles = {   图片： {     身高：100   }， };

我尝试在小提琴上使用相同的图案，根据此SO post

给出固定的高度和宽度

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

但它仍然是顶部的面包和番茄

我已经尝试了GH discussion中描述的一些解决方案，但它们似乎无法正常工作。

如何在不裁剪的情况下自动将图像从网页调整为固定宽度？

Answer 1

使用resizeMode =＆＃39;包含＆＃39;而不是封面，并指定宽度和高度。

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