上一次講到了react-native 的配置環(huán)境 和 如何去進行調(diào)試奶赔,這一次我們說一說惋嚎,關(guān)于react-native的 樣式兼容問題。
由于iphonex的發(fā)售站刑,在兼容的時候另伍,我門也需要去考慮iphoneX。iphoneX的兼容思路就是绞旅,將上部和下部分的安全區(qū)域空出來摆尝。所以在每次寫樣式的整體布局的時候,都需要去判斷是不是iphoneX因悲,如果是iphoneX的話堕汞,那么整體的話,給一個paddingTop 和 paddingBottom晃琳。
好了讯检,閑扯了一個 東西琐鲁。讓我們繼續(xù)將react-native的適配。
一般 這種屬于 webApp UI給的尺寸是 那種帶有px 的人灼,而我們 手機上的最好適配是dhpi围段。也就是 根據(jù)像素密度去進行適配。因為我們的手機他是分為 1倍率投放,2倍率奈泪,1.5倍率的。像iphpne6他是2倍率跪呈,iphone6P他是3倍率段磨。取逾。耗绿。(關(guān)于這些手機的密度怎么獲取的可以直接去react-native的官網(wǎng),然后去找pixelRatio這個API)在此砾隅。误阻。我還是要著重說一下 iphoneX。他是3倍率的手機屏晴埂。但是他的寬度和iphone6一致究反,只不過高度更高了。
一般 像我們設(shè)計師給的尺寸是 750的尺寸儒洛,也就是 iphone6的尺寸精耐。 然后 iphone6的像素密度是2。接下來 我門要開始一系列的換算了琅锻。卦停。。
1.首先我們需要將px轉(zhuǎn)換成dp
做過安卓的都知道恼蓬,在安卓當(dāng)中惊完,單位都是dp而非px。 dp他是適配于各個分辨率的手機屏幕的处硬。
px和dp之間的關(guān)系是:dp = px/像素密度 (在此小槐,iphone6的像素密度是2)
所以 750px = 750/2 dp
- 將設(shè)計師給的尺寸轉(zhuǎn)換成dp并且作為一個基準(zhǔn)
我們 以計算出來的 iphone6的轉(zhuǎn)換來作為一個基準(zhǔn)。
3.計算 當(dāng)前 手機屏幕的尺寸
我們計算 出當(dāng)前手機屏幕的尺寸Dimensions.get('window').width;Dimensions.get('window').height;
將這個尺寸與 iphone6 的尺寸進行對比荷辕,得到一個縮放的比例凿跳,又根據(jù) 上一步的基準(zhǔn)進行十字相乘,得到最終的大小
說了這么多疮方。控嗜。。直接提供代碼地址案站。躬审。
這是我學(xué)習(xí)的資料棘街。。承边。我給了star遭殉。。博助。覺得寫的蠻好的险污。大家可以借鑒借鑒
轉(zhuǎn)載:https://github.com/lizhuoyuan/ReactNativeScreenUtil/blob/master/ScreenUtil.js
下一節(jié)將 react-native 布局。富岳。