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