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

Question

当用户上传头像时，我会将其大小调整为服务器上的100px x 100px。

我希望显示精确的尺寸，并且无论设备访问它，图像都是清晰的，从不模糊，但我知道苹果的像素密度也有2倍和3倍，我不确定它是否会模糊我的形象与否。

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

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

如果是这样那将是一种痛苦，因为未来可能会有更多的密度下落不明。或者100px x 100px单独使用并且看起来是否清晰，无论设备像素密度如何？

Answer 1

反应原生有两套单位。逻辑尺寸和物理尺寸。逻辑尺寸用于布局，即在样式内。物理尺寸用于图像尺寸调整。

如果您使用两个API的Dimensions和PixelRatio，则可以获得您的应用当前正在运行的设备的物理宽度。喜欢的东西;

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

显然，如果你期望图像在显示器的整个宽度上拉伸（Nexus 6的宽度是1440px），那么100px宽的图像在现代手机上看起来不会很好。考虑到今天手机上的dpi范围，我会根据您选择的各种像素数在服务器上生成相同图像的多个版本，然后只加载每个设备所需的图像，即传回像素比率。图像URL中的设备并在服务器后端进行解释。

Answer 2

我不认为您的图像在具有高像素密度的设备上会模糊。 但是，如果有人上传的像素大小为20x20像素，并将其拉伸至100x100，则会非常模糊。