React Native螢幕尺寸適配

2021-08-18 21:45:47 字數 1583 閱讀 3799

現在的手機品牌和型號越來越多,導致我們平時寫布局的時候會在個不同的移動裝置上顯示的效果不同,

比如我們的設計稿乙個view的大小是300,如果直接寫300,可能在當前裝置顯示正常,但到了其他裝置可能就會偏小或者偏大,這就需要我們對螢幕進行適配。

安卓原生的話有自己的適配規則,可以根據不同的尺寸建立不同的資料夾,系統會根據當前的裝置尺寸取對應的大小的布局。而rn本身並沒有適配規則,而原生的又比較反鎖,這就需要我們自己去對螢幕進行適配。

rn中直接寫寬高都是dp的

/**

* 螢幕工具類

* ui設計基準,iphone 6

* width:750

* height:1334

*/var reactnative = require('react-native');

var dimensions = require('dimensions');

export var screenw = dimensions.get('window').width;

export var screenh = dimensions.get('window').height;

var fontscale = reactnative.pixelratio.getfontscale();

export var pixelratio = reactnative.pixelratio.get();

const r2=2;

const w2 = 750/r2;``

const h2 = 1334/r2;

/** * 設定text為sp

* @param size sp

* @returns dp

*/export const default_density=2;

export function setsptext(size:number)

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

* @param size

* @returns

* @constructor

*/export function scalesize(size:number)

通過dimensions.get(『window』).引數來獲取螢幕引數

width和height操作很簡單,通常是在約束元件的大小的時候使用,根據百分比顯示;

例如:設定元件的長度為螢幕的90%:width = dimensions.get(『window』).width * 0.9

預設以iphone6 寬高為基準。

用法

比如iphone6 寬度為 1334

如果在iphone6上設定寬度為一半。 那麼就是 1334 / 2 = 667

直接 w(667) 就可算出對應的裝置縮放後的 寬度了

寬度為w 函式,高度 h 函式,

百分比寬高為 wb,hb

pixelratio類提供了訪問裝置的畫素密度的方法,

參考官網

樣式中引用

const styles = stylesheet.create(,

});

react native獲取螢幕尺寸

專案中需要獲取手機的尺寸 import from react native var window dimensions.get window var width window.width var height window.height var scale window.scale 其中 width...

react native 螢幕尺寸轉換

設計圖的尺寸 一般ui設計原型基於iphone6,解析度 1334 x 750,螢幕尺寸 4.7英吋 計算公式 dpi ppi 螢幕長 2 螢幕寬 2 螢幕尺寸 px dp ppi 160 demsity dpi 160 根據公式計算可得 dpi ppi 1334 2 750 2 4.7 326dp...

手機 螢幕尺寸

手機螢幕尺寸分為物理尺寸和顯示解析度兩個概念。物理尺寸是指螢幕的實際大小。大的螢幕同時必須要配備高解析度,也就是在這個尺寸下可以顯示多少個畫素,顯示的畫素越多,可以表現的餘地自然越大。兩台手機的螢幕大小差不多大,卻乙個只能顯示兩行漢字,另乙個則可以顯示五行漢字,拋開字型大小差別,關鍵就是螢幕的解析度...