ReactNative系列之三屏幕适配

针对Android和iOS的不同机型进行屏幕适配是开发中不可避免的一部分。ReactNative提供了PixelRatio类，解决办法可以分为两种：

第一种，依据一个想要适配的分辩率为主适配对象，根据获取不同机型的手机密度算出显示相对合理的值。可以实现的效果为，在密度为2.5的机型上显示一张图片，宽度为屏幕的一半。经过换算，在机型为3.0的机型上也显示宽度为屏幕的一半。

实现的参考代码为：

/**
 * 屏幕分辨率适配
 * [email protected]
 */
import {
    PixelRatio
} from 'react-native';
//  mdpi for android
PIXEL_RATIO_160_1 =1;
// hdp from android
PIXEL_RATIO_240_1d5 =1.5;
// iphone4, 4s, 5, 5c, 5s, 6, 7; xhdpi from android
PIXEL_RATIO_320_2 =2;
// iphone6p, 7p; xxhdpi for android,1080p
PIXEL_RATIO_480_3 =3;
// larger from android
PIXEL_RATIO_560_3x5 =3.5;

// 设置基准分辨率
BASE_PIXEL_RATIO =PIXEL_RATIO_480_3;

// 根据密度适配不同的分辨率,参数为dp
export function getDimensbyDP(length) {
    // 获取密度
    let ratio=PixelRatio.get();
    if (length== null) {
        length = 0;
    }
    let result= parseInt(length /(PIXEL_RATION_480_3 /ratio));
    return length /(BASE_PIXEL_RATIO/ ratio);
}

// 根据密度适配不同的分辨率，参数为px
export function getDimensbyPX(length) {
    // 获取密度
    let ratio=PixelRatio.get();
    let dp= length/ ratio;
    return getDimensbyDP(dp);
}

 

第二种方式的实现：写一个配置文件，标不同分门辨率或密度的具体分辩率的值。这种方式有点像android里的不同分辨率文件夹下的dimens文件。这种方法更加精确，但比较繁琐

相关参考：http://reactnative.cn/docs/0.23/pixelratio.html