app像素布局自适应不同屏幕手机
作者: 阿蒙 时间: 2020-9-2 标签: App开发 浏览: 2781 评论: 0
import {
Dimensions,
} from 'react-native';
export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
//像素密度
export const DEFAULT_DENSITY = 2;
//px转换成dp
//以iphone6为基准,如果以其他尺寸为基准的话,请修改下面的defaultWidth和defaultHeight为对应尺寸即可. 以下为1倍图时
const defaultWidth = 375;
const defaultHeight = 667;
const w2 = defaultWidth / DEFAULT_DENSITY;
//px转换成dp
const h2 = defaultHeight / DEFAULT_DENSITY;
//缩放比例
const _scaleWidth = screenW / defaultWidth;
const _scaleHeight = screenH / defaultHeight;
/**
* 屏幕适配,缩放size , 默认根据宽度适配,纵向也可以使用此方法
* 横向的尺寸直接使用此方法
* 如:width ,paddingHorizontal ,paddingLeft ,paddingRight ,marginHorizontal ,marginLeft ,marginRight
* @param size 设计图的尺寸
* @returns {number}
*/
export function scaleSize(size: Number) {
return size * _scaleWidth;
}
/**
* 屏幕适配 , 纵向的尺寸使用此方法应该会更趋近于设计稿
* 如:height ,paddingVertical ,paddingTop ,paddingBottom ,marginVertical ,marginTop ,marginBottom
* @param size 设计图的尺寸
* @returns {number}
*/
export function scaleHeight(size: Number) {
return size * _scaleHeight;
}
export function setSpText(size: Number) {
let scaleWidth = screenW / w2;
let scaleHeight = screenH / h2;
let scale = Math.min(scaleWidth, scaleHeight);
size = Math.round((size * scale + 0.5));
return size / DEFAULT_DENSITY;
}
宽高使用scaleSize进行转换,如<view style={{width: scaleSize(100)}}></view>。字体使用setSpText转换, 如<Text style={{fontSize: setSpText(12)}}>文本</Text>
本文相关标签: react-native
发表评论: