移动端开发时,iphoneX和iphone12都采用了刘海屏,为了适配顶部状态栏,需要区分当前设备是否为iphoneX和iphone12。
import {Dimensions, Platform} from '@mrn/react-native'
// 获取设备屏幕宽高
export const screenW = Dimensions.get('window').width
export const screenH = Dimensions.get('window').height
// 比较当前设备和对照设备的屏幕宽高
function matchIOSScreenSize(screenWidth: number, screenHeight: number) {
return (
Platform.OS === 'ios' &&
((screenH === screenHeight && screenW === screenWidth) || (screenH === screenWidth && screenW === screenHeight))
)
}
// 根据iphoneX和iphone12的宽高,和当前设备宽高进行比较
function isIphoneX() {
// iPhone X和iPhone XS
const widthX = 375
const heightX = 812
// iPhone XR和iPhone XS Max
const widthXSM = 414
const heightXSM = 896
// iPhone 12
const width12 = 390
const height12 = 844
return (
matchIOSScreenSize(widthX, heightX) ||
matchIOSScreenSize(widthXSM, heightXSM) ||
matchIOSScreenSize(width12, height12)
)
}