reactnative 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方式设置启动图,默认为空)


 
Build Settings设置
 
3、选中LaunchScreen.storyboard,勾选Use as Launch Screen的选项,注意此时不要取消Use Safe Area Layout Guides选项。(尽管你的项目适配iOS9.0以下会报错,先不要管,如果取消了在后面布局设置中左右会有20像素的留白)
 
LaunchScreen.storyboard配置


4、添加UIImageView控件

 
添加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
        https://www.jianshu.com/p/594a77d6da90
        https://zhuanlan.zhihu.com/p/275902086
原文地址:https://www.cnblogs.com/zhengyan/p/15791391.html