rn适配手机屏幕

适配手机屏幕,宽、高、字体

'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;

你可能感兴趣的:(RN)