美文网首页
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