react-native 适配不同手机屏幕

前提:设计图为iphone6尺寸(750*1334),像素密度默认为2

相关代码:

import {

     Dimensions,

     PixelRatio,

} from 'react-native';

export const deviceWidth = Dimensions.get('window').width;      //设备的宽度

export const deviceHeight = Dimensions.get('window').height;    //设备的高度


let pixelRatio = PixelRatio.get();      //当前设备的像素密度

const defaultPixel = 2;                          //iphone6的像素密度

//px转换成dp

const w2 = 750 / defaultPixel;

const h2 = 1334 / defaultPixel;

const scale = Math.min(deviceHeight / h2, deviceWidth / w2);  //获取缩放比例


export function scaleSize(size: number) {

         size = Math.round(size * scale + 0.5);

         return size;

}


使用时:

fontSize:scaleSize(14)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容