react native 将设计稿中的像素值转换为设备独立像素值（dp）以适配不同设备

封装文件，将设计稿中的像素值转换为设备独立像素值（dp）。

首先，获取屏幕的宽度（screenWidth）和设计稿的宽度（uiWidth）。
然后，定义一个函数 pxToDp，它将设计稿中的像素值（uiElementPx）转换为设备独立像素值（dp）。计算公式为：
const dpValue = (uiElementPx * screenWidth) / uiWidth;

其中，uiElementPx 是设计稿中的像素值，screenWidth 是屏幕的宽度，uiWidth 是设计稿的宽度。通过这个计算，可以将设计稿中的像素值转换为适应当前屏幕的设备独立像素值。

import { Dimensions, StyleSheet } from "react-native";
 
const screenWidth = Dimensions.get("window").width;
const uiWidth = 375;
 
function pxToDp(uiElementPx) {
  return (uiElementPx * screenWidth) / uiWidth;
}
 
const adaptiveStyleSheet = {
  create(styles) {
    const transformedStyles = { ...styles };
    const propertiesToAdapt = [
      "width",
      "height",
      "marginTop",
      "marginRight",
      "marginBottom",
      "marginLeft",
      'marginHorizontal',
      'marginVertical',
      "paddingTop",
      "paddingRight",
      "paddingBottom",
      "paddingLeft",
      'paddingHorizontal',
      'paddingVertical',
      "top",
      "right",
      "bottom",
      "left",
      "fontSize",
      "lineHeight",
    ];
    for (let key in transformedStyles) {
      const style = transformedStyles[key];
      for (let property in style) {
        if (
          propertiesToAdapt.includes(property) &&
          typeof style[property] === "number"
        ) {
          style[property] = pxToDp(style[property]);
        }
      }
    }
    return StyleSheet.create(transformedStyles);
  },
};
 
export { adaptiveStyleSheet as StyleSheet, pxToDp };

使用

使用时直接按照设定的设计稿的尺寸书写样式(const uiWidth = 375;)。

import { StyleSheet } from "./adaptiveStyleSheet";
 
const styles = StyleSheet.create({
  container: {
    width: 200, // 在不同设备下会自动适配为设备独立像素
    height: 100,
    marginTop: 10,
    fontSize: 16,
  },
});
 
export default styles;

行内使用

import { StyleSheet, pxToDp } from "./adaptiveStyleSheet";
 
<View style={{ width: pxToDp(200) }} />