app像素布局自适应不同屏幕手机
作者: 阿蒙 时间: 2020-9-2 标签: App开发 浏览: 2524 评论: 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
发表评论: