react native 螢幕自適應 區分iOS和iPhoneX
阿新 • • 發佈:2018-12-18
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; } }
。。。以上