屏幕适配,文字缩放适配

设计稿单位px,RN单位dp,单位和屏幕分辨率怎么变,比例不会变,做一下转换。

先获取屏幕宽度
两者转换
公式如下:
设计稿元素宽度(px) / 设计稿总宽度(px) = 元素的宽度(dp) / 屏幕的总宽度(dp) 我们要求的就是 元素的宽度(dp)

抽一个公共函数出来,代码如下:

/**
 * Created by yang on 2021/8/11
 * 屏幕适配
 * 以iphone6为准
 * width: 750
 * height: 1334
 * pixel: 2
 * 如果需要更改只需改动:uiWidthPx 、 uiHeightPx 、 defaultPixel 即可
 */

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

//定义设计稿总宽高 单位是px
const uiWidthPx = 750;
const uiHeightPx = 1334;
//获取屏幕宽度
const deviceWidthDp = Dimensions.get('window').width;
//获取屏幕高度
const deviceHeightDp = Dimensions.get('window').height;
//获取字体大小缩放比例
let fontScale = PixelRatio.getFontScale();
//获取当前设备像素密度
let pixelRatio = PixelRatio.get();
//iphone6像素密度
let defaultPixel = 2;
//单位转换成dp
const uiWidthDp = uiWidthPx / defaultPixel;
const uiHeightDp = uiHeightPx / defaultPixel;
//现在设计稿一般都用iphone6的尺寸750*1334来做,如果你的设计稿不是按照这个来,就改一下设计稿总宽高以及像素密度
//获取缩放比例
let scale = Math.min(deviceHeightDp / uiHeightDp, deviceWidthDp / uiWidthDp)
//直接传设计稿元素宽度
export const getWidthDp = (uiEleWidthPx: number) => {
    return (uiEleWidthPx * deviceWidthDp) / uiWidthPx;
}
//直接传设计稿元素高度 (当是正方形元素的时候用一个比例来算)
export const getHeightDp = (uiEleHeightPx: number) => {
    return (uiEleHeightPx * deviceHeightDp) / uiHeightPx;
}
//直接传设计稿字体大小
export const getFontDp = (number: number) => {
    number = Math.round((number * scale) / fontScale / defaultPixel);
    return number;
}

大致就是这样,over!

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐