React native 解析度適配

2021-08-01 20:17:40 字數 2714 閱讀 2098

react native中使用的尺寸單位是pt，是乙個絕對長度，而設計師使用的是px, 這兩種尺寸如何換算呢？官方提供了pixelratio:

import  from


'react-native';


const pt2px = pt=>pixelratio.getpixelsizeforlayoutsize(pt);


const px2pt = px=>pixelratio.roundtonearestpixel(px);
設計師給你乙個尺寸，比如100px*200px的view，按照下面的方式可實現設計還原：

width:px2pt(100),height:px2pt(200),backgroundcolor:"red"}}/>
這個時候，你或許會說，這也太麻煩了，每個有尺寸的地方我都得轉麼，能不能我直接用px寫，當然可以，不過需要整體加個縮放係數：

import } from 'react-native';


const pt2px = pt=>pixelratio.getpixelsizeforlayoutsize(pt);


const px2pt = px=>pixelratio.roundtonearestpixel(px);


let pxratio = pixelratio.get();


let  = dimensions.get("window");


letscale = 1/pxratio;


letwidth = pt2px(win_width);


letheight = pt2px(win_height);


const com = props=>(


style=}/>


)const styles=,,,


,]


},}
這樣處理後，在根節點內，你再也不用考慮pt的問題了，直接使用px即可。

不過此時還有另外乙個問題，設計尺寸是死的，螢幕大小是活的，得考慮解析度適配啊，那在不同的解析度下如何正確的實現設計師的設計呢？

我們將使用一種遊戲經常會用到得方案，fixedwidth/fixedheight.

具體如何應用呢，別急，一步步來。

先來看看如何得到螢幕的畫素寬高：

import  from


'react-native';


let  = dimensions.get("window");


let w =pt2px(width);


let h = pt2px(height);
假定我們的設計尺寸是

let designsize = ;
按照fixedwidth、fixedheight的定義，我們計算下新的寬高：

//fixedwidth


letscale = designsize.width/w;


let winsize = ;


//fixedheight


letscale = designsize.height/h;


let winsize = ;
這個winsize就是最終實際用來布局的螢幕尺寸,此時我們又會多了乙個解析度適配的縮放係數，還記得我們前乙個我們新增的為了使用px的縮放係數麼，我們在這裡做乙個整合：

import } from 'react-native';


const pt2px = pt=>pixelratio.getpixelsizeforlayoutsize(pt);


const px2pt = px=>pixelratio.roundtonearestpixel(px);


let designsize = ;


let pxratio = pixelratio.get();


let  = dimensions.get("window");


letwidth = pt2px(win_width);


letheight = pt2px(win_height);


let design_scale = designsize.width/width;


height = height*design_scale


letscale = 1/pxratio/design_scale;


const com = props=>(


style=}/>


)const styles=,,,


,]


},}
在後續的開發中將不必再關注適配的問題，只需要按照設計師給的尺寸實現布局即可。

最後再附上乙個工具類 resolution.js：

import  from 'react-native';


let designsize = ;


export default class resolution  = dimensions.get("window");


let w = pixelratio.getpixelsizeforlayoutsize(width);


let h = pixelratio.getpixelsizeforlayoutsize(height);


letscale = designsize.width/w;


let winsize = ;


return 


}};

光譜解析度單位 光譜解析度 光譜解析度怎麼計算

光譜解析度指成像的波段範圍，分得愈細，波段愈多，光譜解析度就愈高，現在的技術可以達到5 6nm 奈米 量級，400多個波段。細分光譜可以提高自動區分和識別目.光譜解析度如何選擇 分得愈細，波段愈多，光譜解析度就愈高，現在的技術可以達到5 6nm 奈米 量級，400多個波段。細分光譜可以提高自動區分和...

Fedora12無法調集成適解析度

注 前提是裝了顯示卡驅動 gtf calculate vesa gtf mode lines 中文的意思是計算顯示裝置vesa驅動gtf模式命令列工具 什麼是gtf？gtf generalized timing formula 一般程式時間，定義了產生畫面所需要的時間，包括了諸如畫面重新整理率等 另...

Android解析度常識 多解析度適配

螢幕大小 以螢幕對角線的物理長度來衡量螢幕的大小 解析度 螢幕中所有物理畫素點數。如1920x1080，就表示寬方向有1920個畫素，高方向有1080個畫素，整個螢幕有2073600個畫素。螢幕密度 dpi dots per inch 即畫素密度，每英吋面積上存在多少個畫素。160dpi表示單位面積...