《React-Native系列》 API模块之PixelRatio和Dimensions

PixelRatio和Dimensions 是ReactNative提供的API，这个在我们编写RN页面的时候必须要使用的。

PixelRatio

我们还是先看看官网怎么介绍的。

PixelRatio类提供了访问设备的像素密度的方法。

根据像素密度获取指定大小的图片
如果应用运行在一个高像素密度的设备上，显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸乘以像素密度比：

[javascript]  view plain  copy

 

1. var image = getImage({  
2.   width: PixelRatio.getPixelSizeForLayoutSize(200),  
3.   height: PixelRatio.getPixelSizeForLayoutSize(100),  
4. });  
5. <Image source={image} style={{width: 200, height: 100}} />  

译注: 这段代码的意思是，如果你要在屏幕上摆放一个宽200高100的图片，那么首先要准备多个分辨率尺寸的图。PixelRatio.getPixelSizeForLayoutSize(200)方法会根据当前设备的pixelratio返回对应值，比如当前设备的pixelratio为2，则返回 200 * 2 = 400，最后生成的参数为{ width: 400, height: 200 }，然后开发者自己实现getImage方法，根据这一参数，返回最符合此尺寸的图片地址。


方法
static get() 

返回设备的像素密度，例如：
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

static getFontScale() 
返回字体大小缩放比例。这个比例可以用于计算绝对的字体大小，所以很多深度依赖字体大小的组件需要用此函数的结果进行计算。
如果没有设置字体大小，它会直接返回设备的像素密度。
目前这个函数仅仅在Android设备上实现了，它会体现用户选项里的“设置 > 显示 > 字体大小”。在iOS设备上它会直接返回默认的像素密度。

static getPixelSizeForLayoutSize(layoutSize: number) 
将一个布局尺寸(dp)转换为像素尺寸(px)。
一定会返回一个整数数值。

static startDetecting() 
// 本函数在移动设备上没有作用。

注意点：

1、使用最多的还是PixelRatio.get()  获取像素密度这个方法。

UI一般给出的设计稿单位都是px，那我们RN中的单位是dp，那么我们就需要将px转换为dp，这就需要使用像素密度了。

px = dp / PixelRatio.get() .

这样适配UI的时候，就会比较麻烦。目前我还没想到什么好方法，统一的都像素密度都按2来处理的。

Dimensions

我们也还是先来看看官网怎么说的。

本模块用于获取设备屏幕的宽高。

所提供的方法如下：
static set(dims: {[key:string]: any}) 
这个函数只应该被原生代码调用。.
@param {object} dims 一个简单的字符串作为key的对象，包含了需要设置的尺寸信息。

static get(dim: string) 
初始的尺寸信息应该在runApplication之后被执行，所以它可以在任何其他的require被执行之前就可用。不过在稍后可能还会更新。
注意：尽管尺寸信息立即就可用，但它可能会在将来被修改（譬如设备的方向改变），所以基于这些常量的渲染逻辑和样式应当每次render之后都调用此函数，而不是将对应的值保存下来。（举例来说，你可能需要使用内联的样式而不是在StyleSheet中保存相应的尺寸）。

例子：var {height, width} = Dimensions.get('window');
@param {string} dim 想要获取的尺寸信息的字段名。
@returns {Object?} 返回的尺寸信息值。

注意点：

1、我们使用Dimensions主要还是用来获取屏幕的width和height，不同设置的width和height当然会不同。

小技巧：我们可以将像素密度和width、height封装成一个公用的js，这样不用每个页面都引用PixelRatio和Dimensions。

[javascript]  view plain  copy

 

1. import React from 'react';  
2. import {  
3.  StyleSheet,  
4.  Dimensions,  
5.  PixelRatio,  
6. } from 'react-native';  
7.   
8. export default {  
9.     "pixelRatio" : PixelRatio.get(),  
10.     "width" : Dimensions.get('window').width,  
11.     "height" : Dimensions.get('window').height,  
12. }  

参考：http://reactnative.cn/docs/0.31/dimensions.html#content