import { Dimensions } from "react-native"; // 设计稿宽度 / 元素的宽度 = 手机屏幕 / 手机中的元素宽度 // =》 手机中的元素宽度 = 手机屏幕宽度 * 元素的宽度 / 设计稿的宽度 const screeWidth = Dimensions.get("window").width /** * 将px转为dp * @param {Number} elePx 元素的宽度或高度, 单位 px * @returns */ export const pxToDp = (elePx) => { return screeWidth * elePx / 375 //这里假设设计稿宽度是375 }
使用
import { pxToDp } from "../../utils/stylesKits";
<View style={{ padding: pxToDp(20) }}></View>