美文网首页
Image在Text中时,设置大小样式

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

作者: wu_9f41 | 来源:发表于2018-06-26 10:18 被阅读0次

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

相关文章

网友评论

      本文标题:Image在Text中时,设置大小样式

      本文链接:https://www.haomeiwen.com/subject/zvjpyftx.html