首先明确一点React native里默认单位是dp,即物理大小(尺子量的长度)
Image在View中设置大小,要从 px->dp
/**
* 将UI设计稿中的px转换为dp, 默认是iphone6 750的设计稿
* 使用方式 : 一张图片UI标注宽高为200x400
* <Image style={{width:px2dp(200),height:px2dp(400)}} source=xxx />
* @param {*} uiElementPx
*/
import { Dimensions,PixelRatio,Platform } from 'react-native';
export const deviceWidth = Dimensions.get('window').width; //设备的宽度
export const deviceHeight = Dimensions.get('window').height; //设备的高度
export function px2dp(uiElementPx) {
return (uiElementPx * deviceWidth) / 750;
}
Image在Text里设置大小
import { Dimensions,PixelRatio,Platform } from 'react-native';
let pixelRatio = PixelRatio.get(); //当前设备的像素密度
export function imageScale(uiElementPx) {
let imageScale = Platform.OS === 'ios' ? 1 :pixelRatio;
return px2dp(uiElementPx)*imageScale;
}
网友评论