《react-native》RN文字及布局的机型适配

一、伸手党

---

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()