react native学习笔记19——常用API（1）Dimensions、PixelRatio获取屏幕宽高及单位换算

Dimensions

在React Native中通常使用Dimensions获取屏幕宽高。

Dimensions的方法

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?} 返回的尺寸信息值。

具体实例

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions, } from 'react-native';

export default class DimensionsDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>
                    width:{Dimensions.get('window').width}
                </Text>
                <Text style={styles.instructions}>
                    height:{Dimensions.get('window').height}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

在小米5上运行结果如下：

这里不禁有个疑问了，这个宽360、高640，它们的长度单位是什么？Android开发的朋友可能会微微一笑，360X640这个组合再熟悉不过了，不错，React Native默认的长度单位为dp(device independent pixels)设备独立像素，也称dip。Android开发布局时常常采用dp作为控件的长度单位。

单位转换

• px (pixels)像素
  对应屏幕上的实际像素点。
• dp (device independent pixels)设备独立像素，也称dip
  逻辑长度单位，在 160 dpi 屏幕上，1dp=1px=1/160英寸。随着密度变化，对应的像素数量也变化。它和设备硬件有关，不依赖像素。

dp 与 px 有一个关于 (160/screen density) 的正相关的关系：

1dp = 1物理px （screen density = 160）
1dp = 2物理px （screen density = 320）
1dp = 3物理px （screen density = 480）

dp与px的关系为：1dp = 1px * (160/screen density)

这里 (160/screen density) 实际上就是我们后面要介绍的pixelRatio。

PixelRatio

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

PixelRatio的方法

• 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)。
  一定会返回一个整数数值。

具体实例

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    PixelRatio, } from 'react-native';

export default class PixelRatioDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.content}>
                    pxielRatio={PixelRatio.get()}
                </Text>
                <Text style={styles.content}>
                    {PixelRatio.getPixelSizeForLayoutSize(200)}
                </Text>
                <Text style={styles.content}>
                    {200*PixelRatio.get()}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    content: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

还是用小米5测试：

可以看到getPixelSizeForLayoutSize的结果与我们自己计算的结果相同，验证了：
1dp = 1px * pixelRatio