如何在Xcode中让LaunchScreen.xib图片填充背景（React Native项目）

我之前在React Native项目里调LaunchScreen.xib的时候也踩过一模一样的坑！全屏背景+居中Logo，还要crop to fit的效果，折腾了好一会儿才搞明白，给你分享一套亲测有效的解决步骤：

1. 搞定背景图的全屏裁剪填充 #

这是核心问题的关键，你需要给背景ImageView做两个关键设置：

• 约束铺满屏幕：给背景ImageView添加四个边缘约束——顶部、底部、左侧、右侧完全贴合父视图（也就是ViewController的根View），绝对不要给它加固定宽高，不然肯定没法自适应屏幕。
• 设置内容模式：在Xcode的Attributes Inspector里，把ImageView的Content Mode改成Aspect Fill（这就是你要的crop to fit效果：图片保持原有宽高比，填满整个视图，超出部分自动裁剪），同时一定要勾选Clip Subviews，确保超出的图片部分不会显示在屏幕外。

2. 让Logo稳稳居中显示 #

背景图搞定后，处理Logo就简单了：

• 把Logo ImageView拖到背景图上方，先添加水平居中和垂直居中约束，让它始终处于屏幕正中央。
• 如果需要Logo保持固定宽高比（比如你的Logo是方形），给它加一个Aspect Ratio约束（比如设置宽高比为1:1），这样它会跟着屏幕大小按比例缩放，不会变形。
• 怕Logo在大屏设备上太大？可以额外加Max Width和Max Height约束（比如设为300），限制它的最大显示尺寸。

3. 常见坑点排查 #

如果按上面操作还是有问题，检查这几个地方：

• 是不是把背景图的Content Mode选成了Aspect Fit？这个模式是让图片完整显示、留空白，和你要的裁剪填充完全相反，一定要选Aspect Fill。
• 父视图（ViewController的根View）有没有加固定宽高约束？它必须是自适应设备屏幕的，不然背景图也没法铺满。
• 打开Xcode的Debug View Hierarchy工具，看看约束有没有冲突，或者ImageView的实际尺寸是不是和屏幕一致。

按这套步骤操作后，不管在什么设备上测试，背景图都会全屏裁剪填充，Logo也会稳稳居中显示，亲测有效！

内容的提问来源于stack exchange，提问作者MonkeyBonkey