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

Question

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

<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 图片。

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

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

Answer 1

我遵循的相关方式是：

看来你在用大图，想把它当作小图使用，应该做的是：

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

The resizeMode: 'contain' helps in Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

干杯:)

Answer 2

The actual png image is 96x96,

那是 96 x 96 像素。

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

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

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

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

React Native png image is pixelated and not hd

png

android

image

jsx

react-native