1. 程式人生 > >react native 螢幕自適應 區分iOS和iPhoneX

react native 螢幕自適應 區分iOS和iPhoneX

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;

    }

}

。。。以上