ReactNative: 使用像素密度类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

//获取像素密度
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);