iPhoneX 序列適配方案

和往常同樣，蘋果發佈新產品，咱們做爲開發者都須要對系統和UI佈局進行適配，今年也是同樣。從去年發佈的 iphoneX開始，iPhone 手機加入了劉海設計，並且針對於iphone的劉海，須要特殊的適配。今年新出的3款iphone都帶有劉海，天然也不例外。

在iphonex之前iphone的頂部導航欄高度都是統一的64，底部導航欄是統一的49；從iphonex的劉海屏開始，出了一個SafeArea的概念，帶劉海設計的iphone，頂部導航的高度由原來的64，變成了88，由於狀態欄的高度由原來的20變成了44；底部導航欄的高度由原來的49，變成了83。

因此對於iphonex序列的手機的適配，都須要針對頂部導航&底部導航進行適配。只不過原來判斷iphonex的方法，已經不能徹底判斷新的iphonex新機型。要麼繼續加if{}else{}進行判斷，要麼就是尋找新的方法，還好iphonex序列的機型的寬高比是有規律的。

從網上看到了別人的帖子列出了iphonex序列機型的寬高&比例：

//iphoneX 序列機型的屏幕高寬
//XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//XS SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333
//XR SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//X SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333

iphonex序列iOS原生的適配

#define SCREEN_HEIGHTL [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTHL [UIScreen mainScreen].bounds.size.width
#define KIsiPhoneX ((int)((SCREEN_HEIGHTL/SCREEN_WIDTHL)*100) == 216)?YES:NO
//判斷是否爲 iPhoneXS  Max，iPhoneXS，iPhoneXR，iPhoneX

react-native針對於iphonex序列機型的適配

const {width, height} = Dimensions.get('window');
//iphoneX 序列機型的屏幕高寬
//XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000  2.1642512077
//XS  SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000  2.1653333333
//XR  SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000  2.1642512077
//X   SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000  2.1653333333

//目前iPhone X序列手機的適配算法：高寬比先轉換爲字符串，截取前三位，轉換爲number類型 再乘以100
export const isIphoneX = (Platform.OS === 'ios' && (Number(((height/width)+"").substr(0,4)) * 100) === 216);

總結

不管是iOS原生仍是react-native，只要判斷出是iphonex序列機型，針對頂部導航欄和底部導航欄作特殊的處理便可。保證頂部導航和底部導航的UI正確顯示，可以正確響應事件。（若是適配很差，會出現UI顯示不正確和事件不可以響應的狀況。）