大数据

React native 分辨率适配

React Native中使用的尺寸单位是pt,是一个绝对长度,而设计师使用的是px, 这两种尺寸如何换算呢?官方提供了PixelRatio:

import {PixelRatio} from 'react-native'; const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt); const px2pt = px=>PixelRatio.roundToNearestPixel(px);

设计师给你一个尺寸,比如100px*200px的View,按照下面的方式可实现设计还原:


这个时候,你或许会说,这也太麻烦了,每个有尺寸的地方我都得转么,能不能我直接用px写,当然可以,不过需要整体加个缩放系数:

import {PixelRatio,Dimensions}} from 'react-native'; const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt); const px2pt = px=>PixelRatio.roundToNearestPixel(px); let pxRatio = PixelRatio.get(); let {win_width,win_height} = Dimensions.get("window"); let scale = 1/pxRatio; let width = pt2px(win_width); let height = pt2px(win_height); const com = props=>( ) const styles={ container: { width:width, height:height, backgroundColor: 'transparent', transform:[{translateX:-width*.5}, {translateY:-height*.5}, {scale:scale}, {translateX:width*.5}, {translateY:height*.5}] }, }

这样处理后,在根节点内,你再也不用考虑pt的问题了,直接使用px即可。

不过此时还有另外一个问题,设计尺寸是死的,屏幕大小是活的,得考虑分辨率适配啊,那在不同的分辨率下如何正确的实现设计师的设计呢?

我们将使用一种游戏经常会用到得方案,fixedWidth/fixedHeight.

fixedWidth

fixedWidth 模式是保持原始宽高比缩放应用程序内容,缩放后应用程序内容在水平和垂直方向都填满播放器窗口,但只保持应用程序内容的原始宽度不变,高度可能会改变,简言之宽度固定,高度自适应

fixedHeight

fixedHeight 模式是保持原始宽高比缩放应用程序内容,缩放后应用程序内容在水平和垂直方向都填满播放器窗口,但只保持应用程序内容的原始高度不变,宽度可能会改变,简言之高度固定,宽度自适应

具体如何应用呢,别急,一步步来。
先来看看如何得到屏幕的像素宽高:

import {Dimensions,PixelRatio} from 'react-native'; let {width,height} = Dimensions.get("window"); let w =pt2px(width); let h = pt2px(height);

假定我们的设计尺寸是

let designSize = {width:750,height:1336};

按照fixedWidth、fixedHeight的定义,我们计算下新的宽高:

//fixedWidth let scale = designSize.width/w; let winSize = {width:designSize.width,height:h*scale}; //fixedHeight let scale = designSize.height/h; let winSize = {width:designSize.width*scale,height:designSize.height};

这个winsize就是最终实际用来布局的屏幕尺寸,此时我们又会多了一个分辨率适配的缩放系数,还记得我们前一个我们添加的为了使用px的缩放系数么,我们在这里做一个整合:

import {PixelRatio,Dimensions}} from 'react-native'; const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt); const px2pt = px=>PixelRatio.roundToNearestPixel(px); let designSize = {width:750,height:1336}; let pxRatio = PixelRatio.get(); let {win_width,win_height} = Dimensions.get("window"); let width = pt2px(win_width); let height = pt2px(win_height); let design_scale = designSize.width/width; height = height*design_scale let scale = 1/pxRatio/design_scale; const com = props=>( ) const styles={ container: { width:width, height:height, backgroundColor: 'transparent', transform:[{translateX:-width*.5}, {translateY:-height*.5}, {scale:scale}, {translateX:width*.5}, {translateY:height*.5}] }, }

在后续的开发中将不必再关注适配的问题,只需要按照设计师给的尺寸实现布局即可。

最后再附上一个工具类 Resolution.js:

import {Dimensions,PixelRatio} from 'react-native'; let designSize = {width:750,height:1336}; export default class Resolution { static get(type){ let pxRatio = PixelRatio.get(); let {width,height} = Dimensions.get("window"); let w = PixelRatio.getPixelSizeForLayoutSize(width); let h = PixelRatio.getPixelSizeForLayoutSize(height); let scale = designSize.width/w; let winSize = {width:designSize.width,height:h*scale}; return { width:winSize.width, height:winSize.height, scale:(1/scale)/pxRatio } } };