react native 屏幕自适应区分iOS和iPhoneX

最新推荐文章于 2024-05-12 09:44:56 发布

Lee 酱

最新推荐文章于 2024-05-12 09:44:56 发布

阅读量1.6k

点赞数

分类专栏： react-native 文章标签：屏幕自适应 iPhoneX

本文链接：https://blog.csdn.net/Lee_taotao/article/details/83576897

版权

react-native 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

import { Dimensions, PixelRatio, Platform } from 'react-native';



export const deviceWidth = Dimensions.get('window').width;

export const deviceHeight = Dimensions.get('window').height;

const fontScale = PixelRatio.getFontScale();

const pixelRatio = PixelRatio.get();

const defaultPixel = 2;

const w2 = 750 / defaultPixel;

const h2 = 1334 / defaultPixel;

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



const X_WIDTH = 375;

const X_HEIGHT = 812;



const SCREEN_WIDTH = Dimensions.get('window').width;

const SCREEN_HEIGHT = Dimensions.get('window').height;

 
export function scaleSize(size: number) {

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

    return size / defaultPixel;

}



export function isIphoneX() {

    return (

        Platform.OS === 'ios' &&

        ((SCREEN_WIDTH === X_WIDTH && SCREEN_HEIGHT === X_HEIGHT) ||

        (SCREEN_WIDTH === X_HEIGHT && SCREEN_HEIGHT === X_WIDTH))

    )

}



export function ifIphoneX(iphoneXStyle, iphoneStyle, androidStyle) {

    if(isIphoneX()){

        return iphoneXStyle;

    } else if (Platform.OS === 'ios') {

        return iphoneStyle;

    } else {

        return androidStyle;

    }

}

。。。以上