React Native 如何獲取不同屏幕的像素密度
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ì)算文字的絕對(duì)大小，所以對(duì)計(jì)算的精度要求很高的元素，應(yīng)該使用這個(gè)比率。
例如用戶在通過 Setting > Display > Font Size 設(shè)置設(shè)備的字體顯示大小，這個(gè)值就會(huì)改變，默認(rèn)的情況下返回設(shè)備的像素比。
3、 單位 dp 轉(zhuǎn)換成 px
static getPixelSizeForLayoutSize(layoutSize:number)
在UI開發(fā)的過程中最長(zhǎng)使用到的方法。
結(jié)論
這個(gè)類的使用，以后再開發(fā)的過程中還會(huì)持續(xù)更新。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
- React-Native Android 與 IOS App使用一份代碼實(shí)現(xiàn)方法
- IOS React Native FlexBox詳解及實(shí)例
- Android React-Native通信數(shù)據(jù)模型分析
- ReactNative Alert詳解及實(shí)例代碼
- ReactNative (API)AsyncStorage存儲(chǔ)詳解及實(shí)例
- ReactNative-JS 調(diào)用原生方法實(shí)例代碼
- React-Native TextInput組件詳解及實(shí)例代碼
- ReactNative頁面跳轉(zhuǎn)實(shí)例代碼
- Android原生嵌入React Native詳解
- React Native實(shí)現(xiàn)簡(jiǎn)單的登錄功能(推薦)
- React Native搭建iOS開發(fā)環(huán)境
- PHP獲取不了React Native Fecth參數(shù)的解決辦法
- Windows下React Native的Android環(huán)境部署及布局示例
- 深入淺析react native es6語法
相關(guān)文章
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
詳解在create-react-app使用less與antd按需加載
這篇文章主要介紹了詳解在create-react-app使用less與antd按需加載，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
近兩年前端技術(shù)的發(fā)展如火如荼,大量的前端項(xiàng)目都在使用或轉(zhuǎn)向 Vue 和 React 的陣營(yíng),由前端渲染頁面的單頁應(yīng)用占比也越來越高,這篇文章主要給大家介紹了關(guān)于React全局狀態(tài)管理的三種底層機(jī)制,需要的朋友可以參考下2021-09-09
記錄React使用connect后,ref.current為null問題及解決
記錄React使用connect后,ref.current為null問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
在使用reactjs庫的時(shí)候,會(huì)遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實(shí)現(xiàn),感興趣的可以了解一下2023-12-12
在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
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
自己動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)
這篇文章主要介紹了自己動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
reactjs學(xué)習(xí)解決unknown at rule @tailwind css
這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02