Image在Text中时,设置大小样式

2018-06-26  本文已影响0人  wu_9f41

首先明确一点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;
}
上一篇下一篇

猜你喜欢

热点阅读