美文网首页
React-Native单位转换px转dp

React-Native单位转换px转dp

作者: 涅槃快乐是金 | 来源:发表于2022-05-03 23:17 被阅读0次

    在开发 React-Native 项目的时候通常会涉及到单位转换的问题,这里整理了常用的写法。

    计算公式

    手机中元素的宽度 = 手机屏幕宽度 * 元素宽度 / 设计稿宽度

    工具类 utils.js

    /*
    * @desc 屏幕尺寸适配
    * @params {String} uiElementPx 1倍稿元素尺寸
    * @params {Number} uiWidth     设计稿稿尺寸(default 375)
    * @return {number}
    */
    import { Dimensions, PixelRatio, Platform } from "react-native";
    
    const pxToDp = (uiElementPx: number, isInt = true, uiWidth = 375): number | string => {
            const deviceWidthDp = Dimensions.get("window").width;//屏幕宽
        if (typeof uiElementPx === "string") {
            uiElementPx = Number(uiElementPx);
        }
        if (uiElementPx <= 3) {
            return uiElementPx;
        }
        if (Platform.OS === "web") {
            return (uiElementPx * 10 / uiWidth) + "rem";
        } else {
            const mathResult = uiElementPx * deviceWidthDp / uiWidth;
            const resultInt = isInt ? Math.ceil(mathResult) : mathResult;
            return mathResult > (1 / PixelRatio.get()) ? resultInt : 1 / PixelRatio.get();
        }
    };
    

    相关文章

      网友评论

          本文标题:React-Native单位转换px转dp

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