针对Android和iOS的不同机型进行屏幕适配是开发中不可避免的一部分。ReactNative提供了PixelRatio类,解决办法可以分为两种:
第一种,依据一个想要适配的分辩率为主适配对象,根据获取不同机型的手机密度算出显示相对合理的值。可以实现的效果为,在密度为2.5的机型上显示一张图片,宽度为屏幕的一半。经过换算,在机型为3.0的机型上也显示宽度为屏幕的一半。
实现的参考代码为:
/**
* 屏幕分辨率适配
* feixuedefeng@163.com
*/
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