問題描述:公司開發react-native項目。引入啟動頁,經自測發現,android沒有問題,屏幕正常拉伸。ios端啟動頁沒法正常拉伸,上下有黑邊,且頁面內容布局被擠壓。
于是開始了探索啟動頁正常配置的問題。
初步斷定是xcode配置項有問題。
于是嘗試,讓UI提供所需適配的ios啟動頁。
然后拖到xcode的launchImage目錄里,正確識別。
但是跑起來發現出現上下黑邊現象。
于是自己找了一版尺寸正常的jpg格式的圖片拖進去,圖片正常識別,但是依然存在上下黑邊的現象。
然后,嘗試清空構建的緩存,重新打開xcode,反復拖入正確尺寸的圖片,試了很多次依然失敗。
于是,排除圖片尺寸和格式問題。
可以看到的是,工作區里啟動頁正確顯示,但是卻沒有被正常加載到模擬器中。
于是推測,是xcode新版的配置有了變化,與此同時利用搜索引擎搜到的解決方案都是千篇一律的老方案,和我使用的xcode11.3.1相去甚遠。
接下來開始了重復的探索,注意到
build settings里appicon set name后面的value是AppIcon對應images.xcassets里的名字,如下圖所示。
而launch image set name后面的value對應的內容卻是空字符串。所以猜測是因為沒有加入正確的value導致xcode沒有識別出正確配置的啟動頁,所以默認引用了xcode推薦新增的640*1136的啟動頁(位于ios目錄下)。
接來下嘗試雙擊launch image set name右側的值,輸入LaunchImage,然后情調項目緩存,選擇iPhoneX模擬器運行,果不其然,啟動頁被正常拉伸。如下圖
后來又嘗試切換至默認的iPhone11proMax一樣可以正常拉伸,填充整個屏幕,且頁面內容布局正常。至此啟動頁不能全屏問題總算畫上一個句點。
最后要注意的是:
從2020年4月開始,使? iOS13 SDK 的 App 將必須提供 LaunchScreen,而LaunchImage將退出歷史的舞臺,說明以后啟動頁要通過LaunchScreen來設置了。
小提示:遇到不熟悉的問題,多嘗試幾次,多點耐心,經得起折騰才能成功。