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

灰太狼 2021-09-18 12:02 467阅读 0赞

# 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;

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plcGluZzg5MTEwMw_size_16_color_FFFFFF_t_70]: /images/20210812/85548e195fa5428a936f82e132f47b1f.png