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

实际的 png 图像是 96x96，

那是 96 x 96像素。

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

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

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