android - React Native png 图像是像素化的而不是高清的

Question

我正在尝试在我的 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 图像相同时，大图像会像素化？

Answer 1

The actual png image is 96x96,

那是 96 x 96 像素。

the exact width and height defined in the style for it.

这是 96 x 96 尺寸单位。这些单位可能比实际的物理屏幕像素大很多(在本例中是 4 倍大)并且取决于屏幕的像素密度。查看 this question 的答案获取更多信息。

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