react网页适配不同分辨率_React Native不同设备分辨率适配和设计稿尺寸单位px的适配...

React Native不同设备分辨率适配和设计稿尺寸单位px的适配，设计师给的稿子都是按照px像素单位设计的，这个时候我们怎么快速还原设计稿那？

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

官方提供了PixelRatio进行pt到px的转换import {PixelRatio} from 'react-native';

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

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

设计师给你一个尺寸，比如100px*200px的View，按照下面的方式可实现设计还原：View style={ {width:px2dp(100),height:px2dp(200),backgroundColor:"red"}}

如果每个地方都这样写会很麻烦，于是我们就有了下面转换代码import {PixelRatio,Dimensions}} from 'react-native';

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

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

let designSize = {width:720,height:1280}; //假设设计尺寸为：720*1280

let