React native React Native-像素密度的图像大小？

当用户上传一个化身时，我会在服务器上将其调整为

100px x 100px

我想显示精确的尺寸，无论设备如何访问，图像都要清晰，从不模糊，但我知道苹果的像素密度也有2倍和3倍，我不确定它是否会模糊我的图像

因此，由于目前我没有不同的设备来测试这一点，我是否需要将图像大小调整为3个大小，以避免任何模糊，并根据像素密度提供适当的图像？比如：

100px x 100px
200px x 200px
300px x 300px

---

如果是这样的话，那将是一种痛苦，因为未来可能会有更多的密度下落不明。或者，不管设备像素密度如何，单是

100px x 100px

就足够了，而且看起来很清晰吗？

我认为在高像素密度的设备上，您的图像不会模糊。

---

但是，如果有人上传一个20x20像素大的头像，你将其拉伸到100x100，它将非常模糊。

在react native中有两组单位。逻辑维度和物理维度。逻辑尺寸用于布局，即样式内部的布局。物理尺寸用于调整图像大小

如果使用这两个API的维度和像素比率，则可以获得应用程序当前运行的设备的物理宽度。有点像

var { logicalWidth } = Dimensions.get('window');
var physicalWidth = logicalWidth * PixelRatio.get();

---

很明显，如果你希望100像素宽的图像能延伸到整个屏幕宽度（Nexus 6的宽度为1440像素），那么在现代手机上，100像素宽的图像看起来就不太好了。考虑到当今手机的dpi范围，我会根据您预先选择的不同像素比例在服务器上生成同一图像的多个版本，然后只加载每个设备所需的图像，即在图像url中传回设备的像素比率，并在服务器后端进行解释。

好问题，我也想知道答案。。。谢谢hasseio-但是如果我有3个不同的应用程序定义的头像/任何上传的图像大小，而不仅仅是一个

100px乘100px

，对于不同的场景位置，这意味着我需要在服务器上复制9个，每个像素密度3个（仅查看2x和3x）。以后如果有4x，我将不得不重新打开原始文件，以4x的速度重新保存，制作3种不同大小（乘以2、3和4）的每个图像的12个副本。如果这是唯一的办法，那就糟透了。我将把这个问题保留几天，也许有人会提供更多信息/一个不同的解决方案：）我看到的唯一其他方法是强制用户上传矢量格式的头像ie svg。可能不是一个好的举动：）最后，像素就是像素。如果没有足够的图像，则必须进行插值，这会导致模糊。看看谷歌的材料图标库。每个图标有不同的“应用程序大小”，每个大小有5种不同的分辨率表示。我认为如果有更好/不同的解决方案，谷歌会使用它：）