react-native ios LaunchScreen.storyboard 的使用和适配
一. 设置LaunchImage
1. 选择Assets.xcassets—>左下角+号—>New Image Set.然后自己命一个名字,这个名字记住, 后面创建 出来的image view 需要选中这个名字( 绑定LaunchScreen Image Set)
这个名字,后面需要用到
二.使用LaunchScreen.storyboard搭建启动图
1、首先,要在项目中进行配置。在General—> App Icons and Launch Images—>Launch Screen File中选择LaunchScreen

2、然后,在Build Settings—>Asset Catalog Launch Image Set Name 中将值置空(如果以前没用assert方式设置启动图,默认为空)


4、添加UIImageView控件

5、为新添加的UIImageView

6、选中上下左右的约束(点击短横线),并将数值都设为0,最后点击下面的Add按钮,如下图所示:

7、此时选中带刘海屏的手机模型,你会发现上下还是有留白
8、解决留白问题,在左窗口选中底部约束—>点击右侧的First item—>选择Superview—>将Constant设置为0,如下图所示:

底部约束
修改完的效果如下图所示:

修改完的效果
同样的方式,修改顶部约束:注意此时需要将 Second item—>选择Superview
9、此时将3中提到的Use Safe Area Layout Guides选项取消勾选,然后再将自己的启动图名(这个就是第一步需要记住的名字,选中就可以了)称添加上就可以了

整体效果
10 . 图片没铺满
以前使用LaunchImage方式的时候,使用LaunchImage可以根据不同的屏幕设置不同的图片,现在只能用1倍、2倍、3倍图了,但是8P和11P max都是3倍图,高度却不一样了,如果不做处理用同一张图片会出现留白情况。
简单粗暴处理。在Content Mode—>选择Scale To Fill或者Aspect Fill,让图片自己压缩。Scale To Fill会改变图片宽高比,Aspect Fill会造成图片显示不全。
参考 https://www.jianshu.com/p/13fdc6a3cd41
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
2017-01-12 git忽略某些文件提交