rn尺寸處理

2021-08-11 07:25:28 字數 1749 閱讀 9054

一般ui切圖都會根據指定的螢幕大小和螢幕密度來設計,我們這個專案以iphone 6(750*1334 單位px,畫素密度2)為準;

一般裝置畫素密度:

裝置的畫素密度,例如:

pixelratio.get() === 1 mdpi android 裝置 (160 dpi)

pixelratio.get() === 1.5 hdpi android 裝置 (240 dpi)

pixelratio.get() === 2 iphone 4, 4s,iphone 5, 5c, 5s,iphone 6,xhdpi android 裝置 (320 dpi)

pixelratio.get() === 3 iphone 6 plus , xxhdpi android 裝置 (480 dpi)

pixelratio.get() === 3.5 nexus 6

螢幕資訊(rn預設單位是dp):

import from

'react-native';

export const devicewidth = dimensions.get('window').width; //裝置的寬度,單位dp

export const deviceheight = dimensions.get('window').height; //裝置的高度,單位dp

let fontscale = pixelratio.getfontscale(); //返回字型大小縮放比例

let pixelratio = pixelratio.get(); //當前裝置的畫素密度

const defaultpixel = 2; //iphone6的畫素密度(iphone6 pixelratio=2)

px :是螢幕的畫素點

dp :乙個基於density的抽象單位,如果乙個160dpi的螢幕,1dp=1px

ppi :每英吋單位長度的畫素個數,既 px/英吋,ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英吋數

畫素密度:ppi/160

dp和px的換算公式 :

dp*ppi/160 = px。

比如1dp x 320ppi/160 = 2px。

因為設計稿給的單位是px,而rn預設的單位是dp,所以我們的目的是把px轉化為dp(rn輸入的是dp)

const width6 = 750/defaultpixel;//iphone6 螢幕寬度 dp

const height6 = 1334/defaultpixel;//iphone6 螢幕高度 dp

const scale = math.min(deviceheight / height6, devicewidth / width6); //獲取縮放比例

/** * 螢幕適配,縮放size

*@param size

*@returns

*/export function scalesize(size: number)

/** * 設定字型的size(單位px)

*@param size 傳入設計稿上的px

*@returns 返回實際sp

*/export function setsptext(size: number)

寫的還不完善 後續會修改。

關於 r n和 r n的區別

什麼是回車,什麼是換行?在計算機還沒有出現之前,有一種叫做電傳打字機 teletype model 33,linux unix下的tty概念也來自於此 的玩意,每秒鐘可以打10個字元。但是它有乙個問題,就是打完一行換行的時候,要用去0.2秒,正好可以打兩個字元。要是在這0.2秒裡面,又有新的字元傳過...

JQuery處理元素尺寸和瀏覽器視窗尺寸

栗子1 顯示 div 元素的尺寸 width 返回元素的寬度 height 返回元素的高度 栗子2 js 下面js想新增對話方塊的定位,要求對話方塊顯示在決策報表全屏展示時的最下方,是挨著最下方,請高手幫忙指點 var url webreport reportserver?reportlet 1.c...

r, n與 r n有什麼區別

n是換行,英文是new line r是回車,英文是carriage return 機械打字機有回車和換行兩個鍵作用分別是 換行就是把滾筒卷一格,不改變水平位置。回車就是把水平位置復位,不捲動滾筒。enter 回車 換行 r n 注 r n連用時,不能調換順序 unix換行 n 0x0a mac回車 ...