[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;
目录
相关文章
|
3月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
2月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
120 10
|
5月前
|
前端开发
React——开发调式工具安装【五】
React——开发调式工具安装【五】
45 0
React——开发调式工具安装【五】
|
5月前
|
Web App开发 监控 前端开发
React 性能监测工具大揭秘!Chrome DevTools 高级用法来袭,让你的 React 应用性能飙升!
【8月更文挑战第31天】在前端开发中,React 框架虽简化了高效、交互性强的用户界面构建,但应用复杂性增加亦可能引发性能问题。此时,Chrome DevTools 凭其性能面板成为了优化应用性能的重要工具,能帮助开发者记录与分析加载时间、渲染及脚本执行等性能指标,定位并解决性能瓶颈。同时,其 React 开发者扩展工具允许实时监控组件状态变化,进一步提升性能。结合运用这些功能,将有助于打造流畅的用户体验。
139 0
|
5月前
|
JavaScript 前端开发 安全
|
8月前
|
前端开发 JavaScript
深入了解 React 中的 Ref:不是魔法,是超级工具
深入了解 React 中的 Ref:不是魔法,是超级工具
225 0
|
8月前
|
移动开发 前端开发 JavaScript
React:构建用户界面的强大工具
React:构建用户界面的强大工具
84 0
|
8月前
|
前端开发 JavaScript 开发者
【第48期】一文了解React几个流行的工具和库
【第48期】一文了解React几个流行的工具和库
83 0
|
SQL 前端开发
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
前端项目实战伍拾贰​react-admin+material ui-踩坑-能用工具创建表别用sql
61 0