ReactNative: 使用像素密度類PixelRatio進行適配

一、簡介

現在設備顯示屏的清晰度越來越高，尤其是iOS移動設備上的高清適配，Retina顯示屏。在開發中，為了保證圖片在不同的設備上顯示的效果保持一致，往往需要准備多套圖片，比如iOS開發中的@1x，@2x，@3x圖，這是一件比較繁瑣的事。在RN中，針對這個情況提供了一種新的解決方案，由於RN中的pt單位是統一的，所以通過像素密度來獲取圖片在不同設備上需要的真正大小。PixelRatio類提供的都是靜態的方法，直接類名調用即可。PixelRatio類提供了一些默認的像素密度如下：

像素密度　　　　　　　　　　　　 適用設備
PixelRatio.get() === 1      mdpi Android devices (160 dpi)
PixelRatio.get() === 1.5    hdpi Android devices (240 dpi)
PixelRatio.get() === 2      iPhone 4, 4S, 5, 5c, 5s, 6, xhdpi Android devices (320 dpi)
PixelRatio.get() === 3      iPhone 6 plus、xxhdpi Android devices (480 dpi)
PixelRatio.get() === 3.5    Nexus 6

 

二、API

//獲取像素密度
static get(): number {
  return Dimensions.get('window').scale;
}

//獲取字體比例，目前僅支持安卓，iOS默認還是使用像素密度
static getFontScale(): number {
  return Dimensions.get('window').fontScale || PixelRatio.get();
}

//獲取一個布局元素的真實像素大小，返回值是一個四舍五入的整型
static getPixelSizeForLayoutSize(layoutSize: number): number {
  return Math.round(layoutSize * PixelRatio.get());
}

//將布局尺寸舍入到與整數像素數相對應的最接近的布局尺寸
//例如：on a device with a PixelRatioof 3，PixelRatio.roundToNearestPixel(8.4) = 8.33，exactly (8.33 * 3) = 25 pixels
static roundToNearestPixel(layoutSize: number): number {
  var ratio = PixelRatio.get();
  return Math.round(layoutSize * ratio) / ratio;
}

//僅支持web，開始檢測
static startDetecting() {}

 

三、使用

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    PixelRatio,
    Image
} from 'react-native';


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={styles.flex}>
                <View style={styles.view1}>
                    <Image style={styles.image1} source={{uri:'car1.png'}}/>
                </View>
                <View style={styles.view2}>
                    <Image style={styles.image2} source={{uri:'car1.png'}}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
        alignItems: 'center'
    },
    view1: {
        marginTop: 50,
        width:200,
        height:200,
        borderColor:'red',
        borderWidth: 5,                   ///未適配的線寬
        borderRadius: 4,
        alignItems: 'center',
        justifyContent: 'center'
    },
    view2: {
        marginTop: 30,
        width:200,
        height:200,
        borderColor:'red',
        borderWidth: 5/PixelRatio.get(),  ///適配后的線寬
        borderRadius: 4,
        alignItems: 'center',
        justifyContent: 'center'
    },
    image1: {
        width: 50,                      ///未適配的圖寬（假設圖片的原始寬度）
        height: 60                       ///未適配的圖高（假設圖片的原始高度）
    },
    image2: {
        width: PixelRatio.getPixelSizeForLayoutSize(50),      ///適配后的圖寬
        height: PixelRatio.getPixelSizeForLayoutSize(60)      ///適配后的圖高
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

可以發現：采用當前設備的像素密度適配后，邊框線寬和圖片的尺寸都變的精細了。