适配手机屏幕,宽、高、字体
'use strict';
import React from 'react';
import {Dimensions, PixelRatio, Platform} from 'react-native';
var uiWidth = 375;
var uiHeight= 667;//这里的值,是设计稿中的高度iphone6
var pixel= 1 / PixelRatio.get();
var screenWidth= Dimensions.get('window').width;
var screenHeight= Dimensions.get('window').height;
var pixelRatio= PixelRatio.get();
var fontScale=PixelRatio.getFontScale();
var scale= Math.min(Dimensions.get('window').height / 667, Dimensions.get('window').width / 375);
var utils = {
/*宽度适配,例如我的设计稿某个样式宽度是50pt,那么使用就是:utils.yWidth(50)*/
yWidth(value){
let getValue = Dimensions.get('window').width * value / uiWidth;
if (getValue <= 1&&getValue>0){
getValue = 1
}
return getValue
},
/*高度适配,例如我的设计稿某个样式高度是50pt,那么使用就是:utils.yHeight(50)*/
yHeight(value){
let getValue = Dimensions.get('window').height * value / uiHeight;
if (getValue <= 1 &&getValue>0){
getValue = 1
}
return getValue
},
/*字体大小适配,例如我的设计稿字体大小是17pt,那么使用就是:utils.yFont(17)*/
yFont(value) {
if (Platform.OS === 'android') {
value = Math.round((value * scale + 0.5) * pixelRatio / fontScale);
return value / pixelRatio;
} else {
let deviceWidth = screenWidth;
let deviceHeight = screenHeight;
let deviceRatio = pixelRatio;
let fontSize = value;
// console.log('deviceScreen_'+deviceRatio+'_'+deviceWidth+'_'+deviceHeight);
if (deviceRatio === 2) {
// iphone 5s and older Androids
if (deviceWidth < 360) {
return fontSize * 0.95;
}
// iphone 5
if (deviceHeight < 667) {
return fontSize;
}
// iphone 6-6s
if (deviceHeight <= 735) {
return fontSize * 1.15;
}
// older phablets
return fontSize * 1.25;
}
if (deviceRatio === 3) {
// catch larger devices
// ie iphone 6s plus / 7 plus / mi note 等等 原1.27
//x
if (deviceHeight == 812) {
return fontSize * 1.20;
} else {
//p
return fontSize * 1.21;
}
}
}
},
};
module.exports = utils;