跳到主要內容

PixelRatio

PixelRatio 讓您可以存取裝置的像素密度和字體縮放比例。

取得正確尺寸的圖片​

如果您的裝置具有高像素密度，則應取得更高解析度的圖片。一個好的經驗法則是將您顯示的圖片尺寸乘以像素比。

tsx
const image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />;

像素格線對齊​

在 iOS 中，您可以指定元素的精確位置和尺寸，例如 29.674825。但是，最終物理顯示器只有固定數量的像素，例如 iPhone SE（第 1 代）為 640×1136，iPhone 11 為 828×1792。iOS 盡可能忠實於使用者值，方法是將一個原始像素分散到多個像素中以欺騙眼睛。此技術的缺點是它會使產生的元素看起來模糊。

在實務中，我們發現開發人員不想要此功能，他們必須透過手動捨入來解決此問題，以避免元素模糊。在 React Native 中，我們會自動捨入所有像素。

我們必須小心何時進行此捨入。您永遠不希望同時使用捨入值和未捨入值，因為您會累積捨入誤差。即使只有一個捨入誤差也是致命的，因為一個像素的邊框可能會消失或變成兩倍大。

在 React Native 中，JavaScript 和佈局引擎中的所有內容都使用任意精度的數字。只有當我們在主線程上設定原生元素的位置和尺寸時，我們才會進行捨入。此外，捨入是相對於根元素而不是父元素完成的，這也是為了避免累積捨入誤差。

範例​

參考

方法​

get()​

tsx
static get(): number;

返回裝置像素密度。一些範例

getFontScale()​

tsx
static getFontScale(): number;

返回字體大小的縮放比例。這是用於計算絕對字體大小的比率，因此任何嚴重依賴它的元素都應使用它來進行計算。

  • 在 Android 上，數值反映使用者在設定 > 顯示 > 字體大小中設定的偏好
  • 在 iOS 上，數值反映使用者在設定 > 顯示與亮度 > 文字大小中設定的偏好，數值也可以在設定 > 輔助使用 > 顯示與文字大小 > 更大文字中更新

如果未設定字體縮放比例，則返回裝置像素比。

getPixelSizeForLayoutSize()​

tsx
static getPixelSizeForLayoutSize(layoutSize: number): number;

將佈局尺寸 (dp) 轉換為像素尺寸 (px)。

保證返回整數。

roundToNearestPixel()​

tsx
static roundToNearestPixel(layoutSize: number): number;

將佈局尺寸 (dp) 四捨五入到最接近的佈局尺寸，該尺寸對應於整數像素。例如，在像素比為 3 的裝置上，PixelRatio.roundToNearestPixel(8.4) = 8.33，這正好對應於 (8.33 * 3) = 25 像素。