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

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

最近弄了个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;
目录
相关文章
|
存储 前端开发 JavaScript
ahooks 正式发布:值得拥抱的 React Hooks 工具库
ahook定位于一套基于 React Hooks 的工具库,核心围绕 React Hooks 的逻辑封装能力,降低代码复杂度和避免团队的重复建设为背景,共同建设和维护阿里经济体层面的 React Hooks 库。
21893 1
ahooks 正式发布:值得拥抱的 React Hooks 工具库
|
11天前
|
前端开发 JavaScript
深入了解 React 中的 Ref:不是魔法,是超级工具
深入了解 React 中的 Ref:不是魔法,是超级工具
|
3月前
|
移动开发 前端开发 JavaScript
React:构建用户界面的强大工具
React:构建用户界面的强大工具
18 0
|
3月前
|
前端开发 JavaScript 开发者
【第48期】一文了解React几个流行的工具和库
【第48期】一文了解React几个流行的工具和库
30 0
|
8月前
|
SQL 前端开发
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
27 0
|
10月前
|
缓存 前端开发 数据可视化
|
存储 监控 前端开发
react组件进阶 之代码性能工具的使用
在严格模式下,虽然不能监控到具体的副作用代码,但它会将不能具有副作用的函数调用两遍,以便发现问题。(这种情况,仅在开发模式下有效)
react组件进阶 之代码性能工具的使用
|
前端开发 JavaScript
React中的一个状态管理工具—Flux
React中的一个状态管理工具—Flux
156 0
React中的一个状态管理工具—Flux
|
缓存 前端开发 JavaScript
React 状态管理工具:我是这样选择的
React 状态管理工具五花八门,dva、mobx、recoil、zustand。换做是你,你会怎么选呢?选择一个合适的状态管理工具,对项目研发是至关重要的,来看看我的选择方案吧
28747 25
React 状态管理工具:我是这样选择的
|
前端开发
React工作18:工具学会全局搜索
React工作18:工具学会全局搜索
89 0
React工作18:工具学会全局搜索