一、伸手党
import { Dimensions, PixelRatio } from 'react-native'
const defaultPixel = 2
const wDp = Math.round(750 / defaultPixel)
const hDp = Math.round(1334 / defaultPixel)
const deviceWidthDp = Dimensions.get('window').width; // 设备屏幕宽度
const deviceHeightDp = Dimensions.get('window').height; // 设备屏幕高度
const fontScale = PixelRatio.getFontScale(); // 字体大小缩放比例
const pixelRatio = PixelRatio.get(); // 设备像素密度
const scale = Math.min(deviceHeightDp / hDp, deviceWidthDp / wDp); // 获取缩放比例
export const scaleFont = (size: number) => {
return Math.round((size * scale) / fontScale / defaultPixel);
};
export const scaleSize = (size: number) => {
return Math.round((size * scale) / defaultPixel);
} export const scaleDp = (size: number) => {
return Math.round(size * pixelRatio / defaultPixel);
}
二、为什么要适配
问题：
1.我们家美工UI设计的时候基本上都会基于iphone 6 750x1334这种机型，给出一个单位是px的原型图，但我通过Dimensions.get('window')得到的却是375x667这种组合；
2.同样的width|height在ios的各个机型上所展现的并不相同；
3.同样大小的文字，在各个机型上展现相同，标题过长容易换行，不能保证展示效果一致性。
三、如何进行适配
基础概念：
PPI（pixels per inch）图像分辨率
DPI（dots per inch）打印精度
两者在屏幕适配上来说，可以理解为同一个概念，DPI根据语境不同，会被理解为不同的结果。
dp（Density-independent pixels）一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px
pixel density（像素密度）PixelRatio.get()
PixelRatio.get() === 1 // mdpi Android devices (160 dpi)
PixelRatio.get() === 1.5 // hdpi Android devices (240 dpi)
PixelRatio.get() === 2 // iPhone 4, 4S iPhone 5, 5c, 5s iPhone 6 xhdpi Android devices (320 dpi)
PixelRatio.get() === 3 // iPhone 6 plus xxhdpi Android devices (480 dpi)
PixelRatio.get() === 3.5 // Nexus 6
结论：
dp = px / PixelRatio.get()
