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

当用户上传头像时，我将其大小调整为服务器上的100px x 100px。React Native - 像素密度的图像大小？

我想显示精确的大小和图像锐利，无论设备访问它，从不模糊，但我知道苹果有2倍和3倍的大小以及像素密度，我不确定它是否会模糊我的形象与否。

因此，由于目前我没有不同的设备来测试此功能，我是否需要将图像调整为3种尺寸以避免模糊，并根据像素密度提供相应的尺寸？像：

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

如果这样做会是一个痛苦，因为未来可能会有更多的密度下落不明。或者，只要100px x 100px就足够了，看起来很清晰，无论设备像素密度如何？

来源

2016-08-12 Wonka

好问题我也想知道答案 – Fantasim

反应原生有两组单位。逻辑尺寸和物理尺寸。逻辑尺寸用于布局，即在您的样式中。物理尺寸用于图像大小调整。

如果您使用这两个API的Dimensions和PixelRatio，您可以获取您的应用当前正在运行的设备的物理宽度。就像是;

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

显然，一个100像素宽的图像是不会好看现代化的手机上，如果你期望的图像在整个显示器的整个宽度拉伸（一台Nexus 6的宽度为1440px）。鉴于今天手机上的dpi范围，我会根据您选择的各种像素比例，在服务器上生成相同图像的多个版本，然后仅载入每个设备所需的图像，即将设备的像素比率传回给图片网址并在服务器后端解释。

来源

2016-08-13 01:27:58 hasseio

嗯...谢谢hasseio - 但如果我有3个不同的应用程序定义尺寸的头像/任何上传的图像，而不是一个'100px乘100px'，为不同的场景位置，这意味着我需要服务器上的9个副本，每个像素密度需要3个副本（仅查看2x和3x）。如果是4x，我将不得不重新打开原始文件，将它重新保存为4x，对3种不同大小（乘以2,3和4）的每张图像制作12份副本。这很糟糕，如果这是唯一的方法。我会保持打开几天的问题，也许有人编着更多的信息/不同的解决方案:) – Wonka

我看到的唯一的其他方式是强制用户上传矢量格式化身即SVG。可能不是一个好的举措:)最后，像素是像素。如果你没有足够的，你必须插入，并导致模糊。看看Google的材质图标库。每个图标都有不同的“应用程序大小”，每个大小有5种不同的分辨率表示形式。我想如果有更好的/不同的解决方案，谷歌会用它:) – hasseio

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

来源

2016-08-12 23:03:15

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

回答

相关问题