react网页适配不同分辨率_React native 分辨率适配(px,dp)

React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢？官方提供了PixelRatio:

import {PixelRatio} from 'react-native';

const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);

const px2dp = px=>PixelRatio.roundToNearestPixel(px);

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

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

import {PixelRatio,Dimensions}} from 'react-native';

const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);

const px2dp = px=>PixelRatio.roundToNearestPixel(px);

let pxRatio = PixelRatio.get();

let {win_width,win_height} = Dimensions.get("window");

let scale = 1/pxRatio;

let width = dp2px(win_width);

let height = dp2px(win_height);

const com = props=>(

)

const styles={

container: {

width:width,

height:height,

transform:[{translateX:-width*.5},

{translateY:-height*.5},

{scale:scale},

{translateX:width*.5},

{translateY:height*.5}]

},

}

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

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

我们将使用一种游戏经常会用到得方案&#