圖片來自 Vinicius "amnx" Amano

React Native Pixel Ratio

本文轉載自 Kenneth 的 Medium

Layout 與 Pixel Ratio

React Native 中的 style 雖然不用填單位，但實際上所填入的數字大小跟 CSS 中的 px 行為是一致的。CSS 中的 px 跟螢幕的解析度無關，但會受到裝置的 pixel ratio 所影響。所以基本上可以將整個 React Native 的單位視為 px = dp。

Image 與 Pixel Ratio

React Native 官方文件對於手機的 pixel ratio 有個很清礎的列表：

Pixel RatioDevice
1
  • mdpi Android devices
    • 1.5
  • hdpi Android devices
    • 2
  • iPhone SE, 6S, 7, 8, XR, 11
  • xhdpi Android devices
    • 3
  • iPhone 6S Plus, 7 Plus, 8 Plus, X, XS, XS Max
  • Pixel, Pixel 2
  • xxhdpi Android devices
    • 3.5
  • Nexus 6
  • Pixel XL, Pixel 2 XL
  • xxxhdpi Android devices

    • React Native 以 dp 的單位概念做開發處理 layout 跟處理網頁一樣，沒有什麼問題。但是遇到要顯示圖片時，就要特別注意一下了。比如你是要顯示一張 200 * 100 的圖片：

    <Image source={image} style={{ width: 200, height: 100 }} />;

    而這個 image 的解析度必需要乘上此裝置的 pixel ratio 才會是 pixel to pixel 的顯示。舉例來說，在 iPhone 8 Plus 的裝置上，這個 image 就應該是 600 * 300 的解析度。

    關於 Font Scale 與 Pixel Ratio

    官方文件提到會影響 font scale 會受到以下的因素影響。如果系統都沒有設定的話，那就會套用 pixel ratio：

    getFontScale()

    如果你的 app 很重視 layout 比例與字體大小，不想受到使用調整系統字型大小的影響，那你就必需把 Text 的 allowFontScaling 關掉（這個 props 預設是開啟的），但你一但把 allowFontScaling 關了，那你就必需自己處理字型在不同 pixel ratio 裝置的顯示大小，字型的大小要再乘上 pixel ratio，這是要特別注意的。

    作者：Kenneth

    CEO of INFOLINK. Top IT service provider for SMB retails.

    本文由 INFOLINK 聯騰資訊股份有限公司提供，聯騰資訊專注於為零售與餐飲產業提供智慧化的系統解決方案，以 ERP 為核心為客戶開拓 E 化應用，與 POS、BI、EC 等應用實現無縫整合，我們在此分享我們對產業與技術的觀點，歡迎與我們交流或追蹤我們。