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方式设置启动图，默认为空）

 

 

 

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