RN屏幕、文字大小适配

最新推荐文章于 2022-10-21 13:36:27 发布

bug制造机

最新推荐文章于 2022-10-21 13:36:27 发布

阅读量830

点赞数 1

文章标签： android javascript react native

本文链接：https://blog.csdn.net/weixin_42369566/article/details/119607671

版权

屏幕适配，文字缩放适配

设计稿单位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