时间戳

首页 > 解决方案 > 如何在本机反应中缩放不同大小的图像以具有相同的宽度

react-native - 如何在本机反应中缩放不同大小的图像以具有相同的宽度

问题描述

我正在尝试为带有图像帖子的应用程序创建提要页面。图像可以有不同的大小，但它们必须像您在 facebook 上看到的那样拉伸或缩小到帖子/屏幕的正确宽度，或者在 reddit 上穿线缩略图。

这是我正在使用的示例图像： https ://cdn.discordapp.com/attachments/469170673533583361/822830018794356736/1.jpg

使用以下代码：

风格片段：

postImageView : {
  flex : 1,
  width : '100%'
},
  postImage : {
  flex : 1,
  resizeMode : 'stretch'
},

组件片段：

<View style={styles.postImageView}>
  <Image source={imageList[0]} style={styles.postImage}/>
</View>

我得到以下结果： https ://discord.com/channels/102860784329052160/469170673533583361/822829976616566785

如您所见，图像被推向屏幕左侧，并远远超出限制。宽度和高度中的硬编码可以固定给定图像大小的大小，但不适用于不同的大小。

我测试了来自https://reactnative.dev/docs/image-style-props#resizemode的道具，大多数对图像的形状没有影响。

在视图或图像中设置 flex 或将宽度设置为 100% 对输出没有影响。

完整代码转到：https ://pastebin.com/K1QATwA5 。请注意，当前不需要最后两个导入，因此如果您决定尝试运行它，可以将其删除。

标签： react-native

解决方案

您是否尝试过更改resizeMode参数？看起来将其更改为center可能会奏效。

反应原生图像文档

推荐阅读