Question

我无法让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的高度和宽度。

仅当源图像与帧的宽高比不同时才会出现裁剪，正方形源将产生完美缩放的图像。

Answer 1

我试图重现您的情况，但在零食中我没有问题：

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

图像的原始大小比容器大，即使它具有不同的宽高比收音机，也已根据internal_button_avatar_image加载。

你还好吗？

Answer 2

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

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

2 个答案: