react-native项目Xcode11.3.1 (11C504)添加引导页不能全屏展示问题解决方案

问题描述：公司开发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来设置了。

小提示：遇到不熟悉的问题，多尝试几次，多点耐心，经得起折腾才能成功。