准备
首先，我们在官方文档宽度和高度一节可以知道，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 />
@H_404_233@其他
我们可以写一个工具类，这些常用的写在一起，方便使用：
ScreenUtil.js
import {Dimensions,Platform,PixelRatio} from 'react-native'
export default {
width: Dimensions.get('window').width,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 关系以及换算
