I've written the following code for my project:
在文件上:multiResolution.js
I have:
export function getCorrectFontSizeForScreen(PixelRatio, screenWidth, screenHeight, currentFont){
let devRatio = PixelRatio.get();
let factor = (((screenWidth*devRatio)/320)+((screenHeight*devRatio)/640))/2.0;
let maxFontDifferFactor = 5; //the maximum pixels of font size we can go up or down
// console.log("The factor is: "+factor);
if(factor<=1){
return currentFont-float2int(maxFontDifferFactor*0.3);
}else if((factor>=1) && (factor<=1.6)){
return currentFont-float2int(maxFontDifferFactor*0.1);
}else if((factor>=1.6) && (factor<=2)){
return currentFont;
}else if((factor>=2) && (factor<=3)){
return currentFont+float2int(maxFontDifferFactor*0.65);
}else if (factor>=3){
return currentFont+float2int(maxFontDifferFactor);
}
}
function float2int (value) {
return value | 0;
}
然后在每个反应本机组件上我执行以下操作:
import { PixelRatio } from 'react-native';
import {getCorrectFontSizeForScreen} from './multiResolution'
import Dimensions from 'Dimensions';
const {height:h, width:w} = Dimensions.get('window'); // Screen dimensions in current orientation
然后在我的styles
I do:
var portraitStyles = StyleSheet.create({
titleText: {
fontSize: getCorrectFontSizeForScreen(PixelRatio, w,h,27),//magic takes place here
},
});
这是习惯,但对我来说效果很好。
另外(与你的问题无关,但我还是要说),我使用与 screenWidth 和 screenHeight 相关的宽度和高度,如下所示:
aStyleForAnElement:{ //this element will occupy
width: w*0.55, //55% of the screen width
height:h*0.05 //5% of the screen height
}
到目前为止,这就是我在项目中支持不同屏幕尺寸的方式。