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 - 像素密度的圖像大小？

回答

相關問題