react native 像素适配

Echo-潔

已于 2023-06-30 14:06:06 修改

阅读量470

点赞数

分类专栏： react native 文章标签： react native javascript react.js

于 2023-05-16 15:22:06 首次发布

本文链接：https://blog.csdn.net/qq_44094296/article/details/130706318

版权

react native 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该文介绍了两种在ReactNative中进行屏幕适配的方法，包括根据设计稿尺寸和设备尺寸计算缩放比例，以及转换元素的宽度、高度和字体大小。主要涉及Dimensions模块获取屏幕尺寸，PixelRatio用于处理像素密度，以及相应的单位dp和px之间的转换函数。

摘要由CSDN通过智能技术生成

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;
}