react-native自适应屏幕

最新推荐文章于 2024-07-31 09:58:53 发布

xinkailei3

最新推荐文章于 2024-07-31 09:58:53 发布

阅读量3.2k

点赞数 2

分类专栏： react-native 文章标签： reactive-native

本文链接：https://blog.csdn.net/xinkailei3/article/details/85164181

版权

react-native 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

创建如下js文件

/**
 * Created by qianxin on 17/6/1.
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */
let ReactNative = require('react-native');
// 获取屏幕的dp
let Dimensions = require('Dimensions');
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
let fontScale = ReactNative.PixelRatio.getFontScale();
let pixelRatio = ReactNative.PixelRatio.get();
// 高保真的宽度和告诉
const designWidth = 750.0;
const designHeight = 1334.0;

// 根据dp获取屏幕的px
let screenPxW = ReactNative.PixelRatio.getPixelSizeForLayoutSize(screenW);
let screenPxH = ReactNative.PixelRatio.getPixelSizeForLayoutSize(screenH);

/**
 * 设置text
 * @param size  px
 * @returns {Number} dp
 */
export function setSpText(size: Number) {
    console.log("screenW======" + screenW)
    console.log("screenPxW======" + screenPxW)
    var scaleWidth = screenW / designWidth;
    var scaleHeight = screenH / designHeight;
    var scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round(size * scale / fontScale + 0.5);
    return size;
}

/**
 * 设置高度
 * @param size  px
 * @returns {Number} dp
 */
export function scaleSizeH(size: Number) {
    var scaleHeight = size * screenPxH / designHeight;
    size = Math.round((scaleHeight / pixelRatio + 0.5));
    return size;
}

/**
 * 设置宽度
 * @param size  px
 * @returns {Number} dp
 */
export function scaleSizeW(size: Number) {
    var scaleWidth = size * screenPxW / designWidth;
    size = Math.round((scaleWidth / pixelRatio + 0.5));
    return size;
}

使用

import {scaleSizeH, scaleSizeW, setSpText} from '../util/screen';

const style = StyleSheet.create({
    view: {
        flexDirection: 'row',
        height: scaleSizeH(500),
        width: scaleSizeW(750)
})