React-native 简单的屏幕适配

准备

官方文档中宽度和高度中可以知道，RN中的单位是dp，这个跟Android中的单位是一致的。

A dp is equal to one physical pixel on a screen with a desity of 160。To calculate dp:

dp = (width in pixels * 160) / screen desity。

screen density是屏幕密度，它约等于(dpi/160)，在RN中我们可以通过PixelRatio得到：

• PixelRatio.get() === 1 // mdpi Android设备（160 dpi）
• PixelRatio.get() === 1.5 // hdpi Android设备 (240 dpi)
• PixelRatio.get() === 2 // iPhone 4 - 6 设备 xhdpi Android设备（320dpi）
• PixelRatio.get() === 3 // iPhone 6 puls - iPhoneX xxhdpi Android设备（480 dpi）
• PixelRatio.get() === 3.5 // Nexus 6

RN中的尺寸单位为dp，而设计稿中的单位为px

1dp=（1 * density） px，相反1px=（1/density）dp。(density密度跟pixelRatio相近，即设备的像素比，也就是说，在像素比越小的设备上，同样的尺寸显示的越大)

一般的设计稿都是以iPhone 6为基础来设计的，但是假如直接在代码中使用原始的值，在iPhone6中也许可以很好的适配，但在低像素的安卓手机和 高像素的plus就会出现很大的显示差别。

所以为了能够使设计稿在不同手机上的显示尽量相同，我们需要对拿到的尺寸进行统一的处理以适配不同的屏幕。

另外，由于设备的高度不一样，所以我们需要对不同的宽高的设备也进行相应的适配。

我们进行的处理是，对于像素比为3的设备还是使用原设计稿的尺寸，而小于这些设备，则按照设备的屏幕宽度进行等比例适配。

完整代码如下：

// px.js
import { Dimesions, Platform, PixelRatio } from 'react-native';

const deviceWidth = Dimension.get('window').width;

export default function px(size) {
    if (PixelRatio.get() >= 3 && Platform.Os === 'ios' && size === 1) {
        return size;
    }
    return deviceWidth / 750 * size;
}

我们在使用中就可以直接使用 width: px(120)就可以了。