圖片來自 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 比例與字體大小,不想受到使用調整系統字型大小的影響,那你就必需把 TextallowFontScaling 關掉(這個 props 預設是開啟的),但你一但把 allowFontScaling 關了,那你就必需自己處理字型在不同 pixel ratio 裝置的顯示大小,字型的大小要再乘上 pixel ratio,這是要特別注意的。

    作者:Kenneth

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

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