【React Native】文件翻譯閱讀紀錄 - APIs - PixelRatio

by - 上午9:00

Facebook Open Source React Native


PixelRatio

PixelRatio類可以訪問設備像素密度。

獲取正確大小的圖像

如果您使用的是高像素密度設備,則應獲得更高分辨率的圖像。一個好的經驗法則是將顯示圖像的大小乘以像素比率。
var image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />

像素網格對齊

在iOS中,您可以為任意精度的元素指定位置和尺寸,例如29.674825。但是,最終物理顯示器只有固定數量的像素,例如iPhone 4為640×960或iPhone 6為750×1334.iOS試圖通過將一個原始像素分散為多個像素來盡可能忠實於用戶值欺騙眼睛。這種技術的缺點是它使得結果元素看起來模糊。

在實踐中,我們發現開發人員不需要此功能,他們必須通過手動舍入來解決它,以避免模糊元素。在React Native中,我們自動舍入所有像素。

我們必須小心什麼時候進行這種四捨五入。您永遠不希望在累積舍入錯誤的同時使用舍入和未舍入的值。甚至有一個舍入誤差是致命的,因為一個像素邊界可能消失或是兩倍大。

在React Native中,JavaScript中和佈局引擎中的所有內容都使用任意精度數字。只有當我們在主線程上設置本機元素的位置和尺寸時才會進行舍入。此外,相對於根而不是父進行舍入,以避免累積舍入誤差。

Methods


參考

Methods

get()

static get()
返回設備像素密度。一些例子:
  • PixelRatio.get() === 1
    • mdpi Android devices (160 dpi)
  • PixelRatio.get() === 1.5
    • hdpi Android devices (240 dpi)
  • PixelRatio.get() === 2
    • iPhone 4, 4S
    • iPhone 5, 5c, 5s
    • iPhone 6
    • xhdpi Android devices (320 dpi)
  • PixelRatio.get() === 3
    • iPhone 6 plus
    • xxhdpi Android devices (480 dpi)
  • PixelRatio.get() === 3.5
    • Nexus 6

getFontScale()

static getFontScale() 
返回字體大小的縮放係數。這是用於計算絕對字體大小的比率,因此任何嚴重依賴於它的元素都應該使用它來進行計算。

如果未設置字體比例,則返回設備像素比率。

目前,這僅在Android上實現,並反映了在設置>顯示>字體大小中設置的用戶首選項,在iOS上它將始終返回默認像素比率。 @platform androidgetPixelSizeForLayoutSize()

static getPixelSizeForLayoutSize(layoutSize)
將佈局大小(dp)轉換為像素大小(px)。

保證返回整數。

roundToNearestPixel()

static roundToNearestPixel(layoutSize)
將佈局大小(dp)舍入到與整數個像素對應的最近佈局大小。例如,在PixelRatio為3的設備上,PixelRatio.roundToNearestPixel(8.4)= 8.33,其精確對應(8.33 * 3)= 25像素。

startDetecting()

static startDetecting()
// 適用於iOS的No-op,但在網絡上使用。不應該記錄在案。



You May Also Like

0 意見