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

更新時(shí)間：2017年01月08日 17:31:25 投稿：lqh

這篇文章主要介紹了 React Native 如何獲取不同屏幕的像素密度的相關(guān)資料,需要的朋友可以參考下

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

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

你猜我找到了什么？

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

PixelRatio類提供給我們幾個(gè)重用的方法，整理如下：

1、返回設(shè)備的像素密度

static get()

等同于在Android開發(fā)中通過代碼

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

獲取到的手機(jī)設(shè)備密度。

返回結(jié)果如下圖：（這是從官網(wǎng)上盜的圖，^_^）

舉個(gè)栗子

borderwidth : 1/PixelRatio.get()

返回的就是當(dāng)前設(shè)備的最小線寬。

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

static getFontScale()

獲取到的比率是用來計(jì)算文字的絕對大小，所以對計(jì)算的精度要求很高的元素，應(yīng)該使用這個(gè)比率。

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

3、單位 dp 轉(zhuǎn)換成 px

static getPixelSizeForLayoutSize(layoutSize:number)

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

結(jié)論

這個(gè)類的使用，以后再開發(fā)的過程中還會持續(xù)更新。

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

您可能感興趣的文章:

相關(guān)文章

React?Hydrate原理源碼解析
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
詳解在create-react-app使用less與antd按需加載
這篇文章主要介紹了詳解在create-react-app使用less與antd按需加載，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
React全局狀態(tài)管理的三種底層機(jī)制探究
近兩年前端技術(shù)的發(fā)展如火如荼,大量的前端項(xiàng)目都在使用或轉(zhuǎn)向 Vue 和 React 的陣營,由前端渲染頁面的單頁應(yīng)用占比也越來越高,這篇文章主要給大家介紹了關(guān)于React全局狀態(tài)管理的三種底層機(jī)制,需要的朋友可以參考下
2021-09-09
記錄React使用connect后,ref.current為null問題及解決
記錄React使用connect后,ref.current為null問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
react解析html字符串方法實(shí)現(xiàn)
在使用reactjs庫的時(shí)候,會遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實(shí)現(xiàn),感興趣的可以了解一下
2023-12-12
Rust中Trait的使用
在Rust中,Trait是一個(gè)核心概念,它允許我們定義類型應(yīng)該具有的行為,本文就來具體介紹一下Rust中Trait的使用,感興趣的可以了解一下,感興趣可以了解一下
2024-03-03
react進(jìn)階教程之異常處理機(jī)制error?Boundaries
在react中一旦出錯(cuò),如果每個(gè)組件去處理出錯(cuò)情況則比較麻煩,下面這篇文章主要給大家介紹了關(guān)于react進(jìn)階教程之異常處理機(jī)制error?Boundaries的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
React Native自定義組件與輸出方法詳解
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07
自己動手封裝一個(gè)React Native多級聯(lián)動
這篇文章主要介紹了自己動手封裝一個(gè)React Native多級聯(lián)動，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
reactjs學(xué)習(xí)解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02