react native 像素适配

1、第一种方法

import {
    
     Dimensions, PixelRatio } from 'react-native';

//定义设计稿总宽高 单位是px
const uiWidthPx = 1920;
const uiHeightPx = 1080;
//获取屏幕宽度
const deviceWidthDp = Dimensions.get('window').width;
//获取屏幕高度
const deviceHeightDp = Dimensions.get('window').height;
//获取字体大小缩放比例
let fontScale = PixelRatio.getFontScale();
//获取当前设备像素密度
let defaultPixel = PixelRatio.get();
//单位转换成dp
const uiWidthDp = uiWidthPx / defaultPixel;
const uiHeightDp = uiHeightPx / defaultPixel;
//获取缩放比例
let scale = Math.min(deviceHeightDp / uiHeightDp, deviceWidthDp / uiWidthDp)
//直接传设计稿元素宽度
export const setWidthDp = (uiEleWidthPx) => {
    
    
  return (uiEleWidthPx * deviceWidthDp) / uiWidthPx;
}
//直接传设计稿元素高度 (当是正方形元素的时候用一个比例来算)
export const setHeightDp = (uiEleHeightPx) => {
    
    
  return (uiEleHeightPx * deviceHeightDp) / uiHeightPx;
}
//直接传设计稿字体大小
export const setFontDp = (number) => {
    
    
  number = Math.round((number * scale) / fontScale / defaultPixel);
  return number;
}

2、第二种方法

let ReactNative = require('react-native');
// 获取屏幕的dp
import {
    
    Dimensions} from 'react-native';
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
let fontScale = ReactNative.PixelRatio.getFontScale();
let pixelRatio = ReactNative.PixelRatio.get();
console.log('pixelRatio: ', pixelRatio);
// 高保真的宽度和高度
const designWidth = 768;
const designHeight = 1366;

// 根据dp获取屏幕的px
let screenPxW = ReactNative.PixelRatio.getPixelSizeForLayoutSize(screenW);
let screenPxH = ReactNative.PixelRatio.getPixelSizeForLayoutSize(screenH);

/**
 * 设置text
 * @param size  px
 * @returns {Number} dp
 */
export function setSpText(size) {
    
    
  var scaleWidth = screenW / designWidth;
  var scaleHeight = screenH / designHeight;
  var scale = Math.min(scaleWidth, scaleHeight);
  size = Math.round((size * scale) / fontScale + 0.5);
  return size;
}

/**
 * 设置高度
 * @param size  px
 * @returns {Number} dp
 */
export function scaleSizeH(size) {
    
    
  var scaleHeight = (size * screenPxH) / designHeight;
  size = Math.round(scaleHeight / pixelRatio + 0.5);
  return size;
}

/**
 * 设置宽度
 * @param size  px
 * @returns {Number} dp
 */
export function scaleSizeW(size) {
    
    
  var scaleWidth = (size * screenPxW) / designWidth;
  size = Math.round(scaleWidth / pixelRatio + 0.5);
  return size;
}