使用React Native開發 User Interface，初步了解之后，產生一個疑問，使用flexbox開發頁面，width及height屬性等輸入大小或者說尺寸的地方，不能輸入單位，如 height:80,通過JSX傳化之后到都是按 px 像素單位處理的，因此在這個不同分配率的手機和不同密度的手機顯示的效果不同，如何解決這個問題？
你猜我找到了什么？
React Native 提供的像素比獲取神器PixelRatio
PixelRatio類提供給我們幾個重用的方法，整理如下：
1、返回設備的像素密度
|
1
|
static get() |
等同于在Android開發中通過代碼
|
1
|
context.getResources().getDisplayMetrics().density; |
獲取到的手機設備密度。
返回結果如下圖：（這是從官網上盜的圖，^_^）
舉個栗子
|
1
|
borderwidth : 1/PixelRatio.get() |
返回的就是當前設備的最小線寬。
2、 返回字體大小的縮放因子
|
1
|
static getFontScale() |
獲取到的比率是用來計算文字的絕對大小，所以對計算的精度要求很高的元素，應該使用這個比率。
例如用戶在通過 Setting > Display > Font Size 設置設備的字體顯示大小，這個值就會改變，默認的情況下返回設備的像素比。
3、 單位 dp 轉換成 px
|
1
|
static getPixelSizeForLayoutSize(layoutSize:number) |
在UI開發的過程中最長使用到的方法。
結論
這個類的使用，以后再開發的過程中還會持續更新。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
原文鏈接：http://blog.csdn.net/u013531824/article/details/51013970
