React Native png图像是像素化的而不是高清的答案

【问题标题】：React Native png image is pixelated and not hdReact Native png图像是像素化的而不是高清的
【发布时间】：2017-11-04 12:30:37
【问题描述】：

我正在尝试在我的 React Native 应用程序中显示一个 png 图标，目前在 Android 上，使用以下代码

<Image
  style={styles.wtrhIcon}
  source={{uri: "clearmoon"}}/>

以及它的风格

wtrhIcon: {
width: 96,
height: 96,
}

这就是它的渲染方式

大月亮似乎是像素化的，没有在高清中显示。实际的 png 图像是 96x96，在样式中为其定义的确切宽度和高度。

我在 android/app/src/main/res/(drawable, drawable-xhdpi, mipmap-hdpi, mipmap-mdpi, mipamp-xhdpi, mipmap-xxhdpi) 中拥有所有 png 图像，我遇到同样的问题没有不管我选择哪个 96x96 图像。

底部较小的图标似乎以高清形式显示，我猜是因为尺寸要小得多。

所以我的问题是，当为它定义的宽度和高度与实际的 png 图像相同时，为什么大图像会像素化？

【问题讨论】：

实际的 PNG 是否模糊？

标签： android image react-native png jsx

【解决方案1】：

实际的png图片是96x96，

这是 96 x 96 像素。

在样式中为其定义的确切宽度和高度。

这是 96 x 96 尺寸单位。这些单位可能比实际的物理屏幕像素大很多（在这种情况下是 4 倍），并且取决于屏幕的像素密度。有关详细信息，请参阅this question 的答案。

如果您测量该图像中月亮的实际大小，它大约为 375 x 375 像素。它被放大了 4 倍，所以看起来很模糊。您只需要使用更大的图像。

【讨论】：

好的，这对我来说很有意义。我尝试了不同的png图像，看起来我只需要你说的更大的。将标记为正确答案。干杯

【解决方案2】：

我遵循的密切相关的方式是：

您似乎正在使用大图像并试图将其用作小图像，应该做的是：

在图像样式对象中添加resizeMode: 'contain' and flex: 1。

resizeMode: 'contain' 有助于统一缩放图像（保持图像的纵横比），以便两个尺寸（宽度和高度）图像的尺寸将等于或小于相应的尺寸视图（减去填充）。

干杯:)

【讨论】：