你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> React Native 如何獲取不同屏幕的像素密度

React Native 如何獲取不同屏幕的像素密度

編輯:IOS開發綜合

 React Native  獲取不同屏幕的像素密度

使用React Native開發 User Interface,初步了解之後,產生一個疑問,使用flexbox開發頁面,width及height屬性等輸入大小或者說尺寸的地方,不能輸入單位,如 height:80,通過JSX傳化之後到都是按 px 像素單位處理的,因此在這個不同分配率的手機和不同密度的手機顯示的效果不同,如何解決這個問題?

你猜我找到了什麼?

React Native 提供的像素比獲取神器PixelRatio

PixelRatio類提供給我們幾個重用的方法,整理如下:

1、返回設備的像素密度

static get()

等同於在Android開發中通過代碼

context.getResources().getDisplayMetrics().density;

獲取到的手機設備密度。

返回結果如下圖:(這是從官網上盜的圖,^_^)

舉個栗子

borderwidth : 1/PixelRatio.get() 

返回的就是當前設備的最小線寬。

2、 返回字體大小的縮放因子

static getFontScale()

獲取到的比率是用來計算文字的絕對大小,所以對計算的精度要求很高的元素,應該使用這個比率。

例如用戶在通過 Setting > Display > Font Size 設置設備的字體顯示大小,這個值就會改變,默認的情況下返回設備的像素比。

3、 單位 dp 轉換成 px

static getPixelSizeForLayoutSize(layoutSize:number)

在UI開發的過程中最長使用到的方法。

結論

這個類的使用,以後再開發的過程中還會持續更新。

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved