React Native Image resizeMode ='contain'不起作用

Posted 2023-03-15

【中文标题】React Native Image resizeMode =\'contain\'不起作用

【英文标题】：React Native Image resizeMode='contain' not workingReact Native Image resizeMode ='contain'不起作用

【发布时间】：2018-09-21 01:47:03

【问题描述】：

我无法让resizeMode='contain' 处理远程加载的图像，想知道是不是我做错了什么。

渲染方法：

return (
    <View style=styles.internal_button_avatar_container>
      <Image
        style=styles.internal_button_avatar_image
        source= uri: this.state.imageURL 
        loadingIndicatorSource=require('../assets/icons/PageLink-Loading.png')
        resizeMode='contain'
      />
    </View>
  );

样式（相关部分）：

internal_button_avatar_container: 
  marginRight: 10,
  width: 40,
  height: 40,
,
internal_button_avatar_image: 
  width: 40,
  height: 40,
,

我尝试了resizeMode='contain' 和resizeMode='center'，但图像总是在其框架的外部被裁剪。 Screenshot showing cropped icon.。我也尝试过在图像上使用undefined 高度和宽度。

仅当源图像与框架的纵横比不同时才会出现裁剪，方形源将产生完美缩放的图像。

【参考方案1】：

我试图重现你的情况，但我对这个零食没有任何问题：

https://snack.expo.io/@gersonmontenegro/resizemode

图像的原始尺寸比容器大，即使它有不同的宽高比，它已经根据 internal_button_avatar_image 加载。

你还好吗？

【讨论】：

感谢你的帮助，你让我意识到我的代码是正确的，所以我继续检查唯一的另一种可能性，源图像......

【参考方案2】：

原来我是从自动裁剪原始图像的 API 中的端点获取图像 - 应该先检查源图像！