0

我无法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'但图像总是在框架的外面被裁剪。显示裁剪图标的屏幕截图。. 我也尝试过undefined图像的高度和宽度。

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

4

2 回答 2

0

我试图重现你的情况，但在这个小吃中我没有问题：

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

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

适合你吗？

于 2018-09-21T02:56:43.470 回答
0

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

于 2018-09-21T08:31:57.633 回答