|
導讀和往常一樣，蘋果發布新產品，我們作為開發者都需要對系統和UI布局進行適配，今年也是一樣。從去年發布的 iphoneX開始，iPhone 手機加入了劉海設計，而且針對于iphone的劉海，需要特殊的適... 和往常一樣，蘋果發布新產品，我們作為開發者都需要對系統和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顯示不正確和事件不能夠響應的情況。） 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持本站。
您可能感興趣的文章:
|
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
