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
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095015116-2032640092.png)
2、然后,在Build Settings—>Asset Catalog Launch Image Set Name 中将值置空(如果以前没用assert方式设置启动图,默认为空)
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095034686-69538897.png)
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095113772-639099534.png)
4、添加UIImageView控件
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095218018-1472281841.png)
5、为新添加的UIImageView
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095228893-658060902.png)
6、选中上下左右的约束(点击短横线),并将数值都设为0,最后点击下面的Add按钮,如下图所示:
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095238468-653142962.png)
7、此时选中带刘海屏的手机模型,你会发现上下还是有留白
8、解决留白问题,在左窗口选中底部约束—>点击右侧的First item—>选择Superview—>将Constant设置为0,如下图所示:
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095327974-483101585.png)
底部约束
修改完的效果如下图所示:
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112095338024-654982025.png)
修改完的效果
同样的方式,修改顶部约束:注意此时需要将 Second item—>选择Superview
9、此时将3中提到的Use Safe Area Layout Guides选项取消勾选,然后再将自己的启动图名(这个就是第一步需要记住的名字,选中就可以了)称添加上就可以了
![](https://img2020.cnblogs.com/blog/635133/202201/635133-20220112101822963-635560623.png)
整体效果
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