React Native入门（十一）之屏幕适配

准备

首先，我们在官方文档宽度和高度一节可以知道，RN中单位是dp，这个跟Android中的单位是一致的！

官网中：

A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp:
dp = (width in pixels * 160) /  screen density

这里的 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, 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

说到这里，不妨把涉及到的一些概念梳理一下：

dp（dip）（Density-independent pixels）一种基于屏幕密度的抽象单位，像素无关密度。在每英寸160点的显示器上，1dp = 1px。特别需要注意dp是相对长度单位，简单的说1dp在不同的屏幕或者不同的ppi下展示出来的“物理长度”可能不一致。

px 像素点。也是相对长度

in（inch）英寸。物理长度

pt 中文叫磅，等于1/72英寸。物理长度

sp（与刻度无关的像素）：与dp类似，但是可以根据用户的字体大小首选项进行缩放，Android设置字体的时候使用。

density 密度。这个可以参考上边说的，跟

pixelRatio

相近，约等于DPI/160。

pixelRatio 设备像素比。通过

PixelRatio.get()

获得

PPI (pixels per inch) 图像分辨率 （每英寸所包含的像素数，指对角线）

DPI（dots per inch）打印精度 （每英寸所能打印的点数，指宽高）

分辨率 ： 横纵2个方向的像素点的数量，常见取值 480X800 ，750X1334

屏幕尺寸： 屏幕对角线的长度（英寸）。电脑电视同理。

所以我们可以知道：

1dp=（1 * density） px，相反1px=（1/density）dp

那么，我们如何在RN中设置宽度为1px的分割线呢？

width: 1 / PixelRatio.get()

这样就可以了！

另外，一个设备的宽高，我们可以这样获得：

width: Dimensions.get('window').width,
height: Dimensions.get('window').height,

那么这个得到的宽高是什么呢？

我们可以打印出来，比如iPhone6s，这个值打印出来是width：375，height：667，因为6s的density是2，所以我们知道这个得到的宽高是dp。

适配方案

所以，这里RN中的适配方案：以6，6s为例：

UI设计原型：基于iphone6

分辨率：1334 x 750 px；

屏幕大小：4.7英寸

DPI： 326dpi（约等于320dpi，density=2）

import {Dimensions} from 'react-native';

const deviceWidthDp = Dimensions.get('window').width;
const uiWidthPx = 750;

export default function px2dp(uiElementPx) {
return uiElementPx * deviceWidthDp / uiWidthPx;
}

deviceWidthDp为当前运行设备的宽度，uiWidthPx为UI设计图的宽度，uiElementPx设计图中标注的元素的px值。

那么使用的话，比如一张图片UI标注宽高为200x400：

<Image style={{width:px2dp(200),height:px2dp(400)}} source=xxx />

其他

我们可以写一个工具类，这些常用的写在一起，方便使用：

ScreenUtil.js

import {Dimensions, Platform, PixelRatio} from 'react-native'

export default {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
onePixel: 1 / PixelRatio.get(),
STATUSBAR_HEIGHT: (Platform.OS === 'ios' ? 20 : 0),
APPBAR_HEIGHT: (Platform.OS === 'ios' ? 44 : 56),
}

需要注意的就是：如果这个工具类和调用方不在一个包下边的话，需要我们在工具类这个包下，写一个index.js导出才行，要不然找不到！

import ScreenUtil from './ScreenUtil'
...

export {ScreenUtil};

使用的时候就直接:

ScreenUtil.width

就行！

还有一个问题就是

STATUSBAR_HEIGHT

和

APPBAR_HEIGHT

这个顺便说一下吧！

iOS屏幕坐标是包含状态栏的，所以我们在iOS环境下运行一个组件它会在状态栏下绘制，即会和状态栏重叠，而Android则不会，他会在状态栏下边开始绘制！

上边代码是在StackNavigator/Header中，尤其在我们自定义Header标题栏的时候，需要注意要设置

paddingTop:STATUSBAR_HEIGHT

，这样就避免了iOS下在状态栏下绘制的问题！

参考文章：

React Native 的默认单位和自适应布局方案

react-native 单位换算(px,pt,dp,ppi)

dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算