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;
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值