版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wwl901215/article/details/78632477
react native 屏幕尺寸和文字大小适配(项目总结,参照同事封装的文件和博客)
http://blog.csdn.net/u011272795/article/details/73824558
一般UI切图都会根据指定的屏幕大小和屏幕密度来设计,我们这个项目以iphone 6(750*1334 单位px,像素密度2)为准;
一般设备像素密度:
设备的像素密度,例如:
PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5 hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2 iPhone 4, 4S,iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3 iPhone 6 plus , xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5 Nexus 6
屏幕信息(rn默认单位是dp):
import {Dimensions,PixelRatio} from 'react-native';
export const deviceWidth = Dimensions.get('window').width; //设备的宽度,单位dp
export const deviceHeight = Dimensions.get('window').height; //设备的高度,单位dp
let fontScale = PixelRatio.getFontScale(); //返回字体大小缩放比例
let pixelRatio = PixelRatio.get(); //当前设备的像素密度
const defaultPixel = 2; //iphone6的像素密度(iphone6 pixelRatio=2)
px :是屏幕的像素点
dp :一个基于density的抽象单位,如果一个160dpi的屏幕,1dp=1px
ppi :每英寸单位长度的像素个数,既 px/英寸,PPI = √(长度像素数² + 宽度像素数²) / 屏幕对角线英寸数
像素密度:ppi/160
dp和px的换算公式 :
dp*ppi/160 = px。
比如1dp x 320ppi/160 = 2px。
因为设计稿给的单位是px,而rn默认的单位是dp,所以我们的目的是把px转化为dp(rn输入的是dp)
const width6 = 750/defaultPixel;//iphone6 屏幕宽度 dp
const height6 = 1334/defaultPixel;//iphone6 屏幕高度 dp
const scale = Math.min(deviceHeight / height6, deviceWidth / width6); //获取缩放比例
/**
* 屏幕适配,缩放size
* @param size
* @returns {Number}
*/
export function scaleSize(size: Number) {
newSize = Math.round((size * scale + 0.5));
return newSize / defaultPixel;
}
/**
* 设置字体的size(单位px)
* @param size 传入设计稿上的px
* @returns {Number} 返回实际sp
*/
export function setSpText(size: Number) {
newSize = Math.round((size * scale + 0.5)* pixelRatio / fontScale);
return newSize / defaultPixel;
}
写的还不完善 后续会修改。