React Native 如何獲取不同屏幕的像素密度
React Native 獲取不同屏幕的像素密度
使用React Native開(kāi)發(fā) User Interface，初步了解之后，產(chǎn)生一個(gè)疑問(wèn)，使用flexbox開(kāi)發(fā)頁(yè)面，width及height屬性等輸入大小或者說(shuō)尺寸的地方，不能輸入單位，如 height:80,通過(guò)JSX傳化之后到都是按 px 像素單位處理的，因此在這個(gè)不同分配率的手機(jī)和不同密度的手機(jī)顯示的效果不同，如何解決這個(gè)問(wèn)題？
你猜我找到了什么？
React Native 提供的像素比獲取神器PixelRatio
PixelRatio類提供給我們幾個(gè)重用的方法，整理如下：
1、返回設(shè)備的像素密度
static get()
等同于在Android開(kāi)發(fā)中通過(guò)代碼
context.getResources().getDisplayMetrics().density;
獲取到的手機(jī)設(shè)備密度。
返回結(jié)果如下圖：（這是從官網(wǎng)上盜的圖，^_^）
舉個(gè)栗子
borderwidth : 1/PixelRatio.get()
返回的就是當(dāng)前設(shè)備的最小線寬。
2、 返回字體大小的縮放因子
static getFontScale()
獲取到的比率是用來(lái)計(jì)算文字的絕對(duì)大小，所以對(duì)計(jì)算的精度要求很高的元素，應(yīng)該使用這個(gè)比率。
例如用戶在通過(guò) Setting > Display > Font Size 設(shè)置設(shè)備的字體顯示大小，這個(gè)值就會(huì)改變，默認(rèn)的情況下返回設(shè)備的像素比。
3、 單位 dp 轉(zhuǎn)換成 px
static getPixelSizeForLayoutSize(layoutSize:number)
在UI開(kāi)發(fā)的過(guò)程中最長(zhǎng)使用到的方法。
結(jié)論
這個(gè)類的使用，以后再開(kāi)發(fā)的過(guò)程中還會(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頁(yè)面跳轉(zhuǎn)實(shí)例代碼
- Android原生嵌入React Native詳解
- React Native實(shí)現(xiàn)簡(jiǎn)單的登錄功能(推薦)
- React Native搭建iOS開(kāi)發(fā)環(huán)境
- PHP獲取不了React Native Fecth參數(shù)的解決辦法
- Windows下React Native的Android環(huán)境部署及布局示例
- 深入淺析react native es6語(yǔ)法
相關(guān)文章
這篇文章主要介紹了react中引入less并支持antd主題換膚方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
“Props” 是 React 中用于傳遞數(shù)據(jù)給組件的一種機(jī)制,通常作為組件的參數(shù)進(jìn)行傳遞,在 React 中,props 是只讀的,意味著一旦將數(shù)據(jù)傳遞給組件的 props,組件就不能直接修改這些 props 的值,這篇文章主要介紹了React的Props、生命周期,需要的朋友可以參考下2024-06-06
React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話框功能
Modal(模態(tài)框)是 web 開(kāi)發(fā)中十分常見(jiàn)的組件,即從頁(yè)面中彈出的對(duì)話框,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話框功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了react使用echart繪制地圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
ahooks useVirtualList 封裝虛擬滾動(dòng)列表
這篇文章主要為大家介紹了ahooks useVirtualList 封裝虛擬滾動(dòng)列表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React?Router?v6路由懶加載的2種方式小結(jié)
React?Router?v6?的路由懶加載有2種實(shí)現(xiàn)方式,1是使用react-router自帶的?route.lazy,2是使用React自帶的?React.lazy,下面我們就來(lái)看看它們的具體實(shí)現(xiàn)方法吧2024-04-04
這篇文章主要介紹了react setState的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
React18之update流程從零實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了React18之update流程從零實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React?Native集成支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實(shí)現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下2022-02-02
React循環(huán)遍歷渲染數(shù)組和對(duì)象元素方式
這篇文章主要介紹了React循環(huán)遍歷渲染數(shù)組和對(duì)象元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09