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 pxRatio = PixelRatio.get();
let win_width = Dimensions.get("window").width;
let win_height = Dimensions.get("window").heig