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 关系以及换算