react-native系列(24)API篇：屏幕宽高和屏幕像素密度

Dimensions屏幕宽高

Dimensions库可以获取屏幕的宽高：

import { Dimensions } from 'react-native';

const {height, width} = Dimensions.get('window'); // 可用显示屏幕的宽高，不包括顶部的状态信息栏
const {height, width} = Dimensions.get('screen'); // 整个显示屏幕的宽高，包括顶部的状态信息栏

如果屏幕发生旋转，如由竖屏变为横屏，则屏幕宽高值也会随着变化，可以通过'change'事件监听：

componentDidMount(){
    Dimensions.addEventListener('change', this._change);
}

componentWillUnmount(){
    Dimensions.removeEventListener('change', this._change);
}

// 当屏幕发生旋转时触发
_change = (e) => {
    console.log(e.window, e.screen);
}

PixelRatio屏幕像素密度

在RN开发中，在样式中设置宽高或坐标等值是不需要设置单位的，它们的默认单位是dips(device-independent pixels)。

• dips：设备独立像素，称为布局尺寸。
• px：物理像素，称为像素尺寸。

这里有个公式：

移动设备屏幕像素密度 = 像素尺寸 /  布局尺寸

那么我们知道这个公式有什么用呢？它可以用来计算高像素密度的设备上的图片尺寸精度，就是说，如果想要在移动设备上显示一张很大分辨率的照片原图尺寸(不经过缩放)，如5000px(像素尺寸)，由于在设备上默认单位并不是px，所以无法直接将宽高设为5000。这时就必须通过公式计算出布局尺寸，即在样式中宽高的赋值。

布局尺寸 = 像素尺寸 / PixelRatio.get() 

PixelRatio.get() 为PixelRatio库提供了获取设备屏幕像素密度的函数。

PixelRatio库也提供了一个转换函数来获取像素尺寸：

const pxValue = PixelRatio.getPixelSizeForLayoutSize(dipsValue)； // 入参为布局尺寸，转换结果为像素尺寸。
等同于
像素尺寸 = 布局尺寸 * PixelRatio.get();

下面的例子展示了1个单位的布局尺寸dips和1个单位的像素尺寸px在显示上的区别：

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

class PixelRatioAPI extends React.Component {

    render(){
        return(
            <View style={styles.containerViewStyle}>
                <View style={styles.dpViewStyle}>
                    <Text>1dp(布局尺寸)边框</Text>
                </View>
                <View style={styles.pxViewStyle}>
                    <Text>1px(像素尺寸)边框</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerViewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    dpViewStyle: {
        height: 100,
        borderWidth: 1
    },
    pxViewStyle: {
        marginTop: 20,
        height: 100,
        borderWidth: 1/PixelRatio.get()
    }
});

export default PixelRatioAPI;

效果：