[react-native]宽、高,字体大小屏幕适配工具

最近弄了个react-native的项目,当做学习rn,先放个工具类,后期慢慢更其他东西;
直接上代码,代码也不多;
做到宽、高、字体大小的不同适配(实现很简单,只是为了按不同屏幕大小进行百分比)

'use strict'
import React from 'react';
import {Dimensions, PixelRatio} from 'react-native';

var utils = {
    uiWidth: 375,//这里的值,是设计稿中的宽度,你们根据自己的设计稿改动,本人拿到的设计稿是iphone6的
    uiHeight: 667,//这里的值,是设计稿中的高度,你们根据自己的设计稿改动,本人拿到的设计稿是iphone6的
    pixel: 1 / PixelRatio.get(),
    screenWidth: Dimensions.get('window').width,
    screenHeith: Dimensions.get('window').height,
    pixelRatio: PixelRatio.get(),
    fontScale: PixelRatio.getFontScale(),
    scale: Math.min(Dimensions.get('window').height / 667, Dimensions.get('window').width / 375),

    /*宽度适配,例如我的设计稿某个样式宽度是50pt,那么使用就是:utils.autoWidth(50)*/
    autoWidth: function (value) {
        return Dimensions.get('window').width * value / this.uiWidth;
    },
    /*高度适配,例如我的设计稿某个样式高度是50pt,那么使用就是:utils.autoheight(50)*/
    autoheight: function (value) {
        return Dimensions.get('window').height * value / this.uiHeight;
    },
    get: function (url, successCallback, failCallback) {
        fetch(url).then((response) => response.text())
            .then((responseText) => {
                successCallback(JSON.parse(responseText));
            }).catch(function (err) {
            failCallback(err);
        });
    },
    /*字体大小适配,例如我的设计稿字体大小是17pt,那么使用就是:utils.setSpText(17)*/
    setSpText: function (number) {
        number = Math.round((number * this.scale + 0.5) * this.pixelRatio / this.fontScale);
        return number / PixelRatio.get();
    },
    /*通过value删除数组元素*/
    removeByValue: function (arr, value) {
        let i = arr.length;
        while (i--) {
            if (arr[i] === value) {
                arr.splice(i, 1);
            }
        }
    },
    /*判断是否存在数组*/
    isInArray: function (arr, value) {
        let i = arr.length;
        while (i--) {
            if (arr[i] === value) {
                return true
            }
        }
    }
};

module.exports = utils;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值