iOS启动页图片设置方式及错误的解决办法。

尺寸介绍:

640 * 960----4,4s

640 * 1136 ----5,5s,5c

750 * 1334 ----6

1242 * 2208---- 6 plus

这时候Xcode是不会报任何警告的,如果有警告说明你肯定有尺寸是放错了或者是图片本身就有问题

这是会d出两个选项让你选择,当然是选择刚刚我们创建好的launchimage,（在 *** 作了上述步骤后系统会自动在Asset里面创建一个启动图片容器,所以会有launchimage-2,后面可以在asset里面看到这个launchimage2,删除他就好了）

检查所有图片尺寸是否设置正确,尺寸没有设置够或者大小错误都会出现这个问题。

这种情况肯定是因为启动页还没有设置成功,他就一直会显示以前的启动页(无论是否删除了以前的启动页的图片或者重新安装过app),这时候可能就会误导你的解决方向,让你把问题放在以前是否哪儿设置错误,引起现在的启动页设置失败（bug）,所以不用管它,直接检查目前这种方式设置的时候哪儿出了问题。

可以试着打开项目中launch. LaunchScreen.storyboard或者低版本为（LaunchScreen.xib）取消use as launch screen

　什么是启动画面（Splash Screen）？

对于一些新的开发人员，可能没有听说过启动画面，让我简单解释一下。启动画面在iOS Apps中比较常见，也包括一些桌面应用程序。就是你启动App的时候看到的第一个界面。通常，启动画面是覆盖整个屏幕的一张图片，在主屏幕装载完成后隐藏。下图显示了一些启动画面的示例：

启动画面的主要目的是让用户知道你的App正在装载，并且对用户介绍你的品牌。启动画面对哪些需要较长时间启动的Apps尤其重要。一般而言，启动画面是为了给用户更好的体验。

在你的App中添加启动画面

前面提到过，显示启动画面并不需要编写任何代码。iOS提供了一个内置的功能 – 启动图像。在用户打开App时自动显示该图像，在App启动完成之后该图像自动消失。你可以在Xcode中进行简单设置启动图像，Xcode就可以负责后续事情了。

准备你的启动画面

我们知道iPhone 4/4S支持更高分辨率（也就是所谓的视网膜显示器-Retina Display）。为了同时支持2中分辨率，我们需要准备2个版本的启动画面：

320 x 480 (for iPhone 2G / 3G / 3GS)

640 x 960 (for iPhone 4 / 4S)

为了简单一点，我这里演示如何为iPhone App添加启动画面，针对iPad App的 *** 作，请参考Apple的 iOS Human Interface Guideline文档 – 关于启动图像大小和命名规范。

启动图像必须为PNG格式。默认情况下，你可将低分辨率图像文件命名为 Default.png，对高分辨率的图像，用于Retina屏幕的（640*960分辨率）图像文件命名为 Default@2x.png，@2x是iOS中一种标准的分辨率修饰符。所有用于在Retina屏幕显示的图像都应采用 @2x 字符串。

你也可以不是有Default 作为启动图像文件名，使用其他你喜欢的文件名。启动图像文件定义在App的Info.plist文件中。以我们创建的Simple Table应用程序为例，在SimpleTable-Info.plist文件中，添加一个新的属性命名为 – Launch image，并指定你偏爱的文件名（如 MyLaunchImage）。

上述 *** 作指示iOS 使用 MyLaunchImage.png 和 MyLaunchImage@2x.png 文件作为启动画面。

你可以设计你自己的启动画面。基于测试的需要，你可以到这里下载启动画面。

在Xcode中添加你的启动图像

在准备好启动图像之后，回到Xcode，打开你的Xcode项目，我们继续使用Simple Table项目。右击 SimpleTable项目，选择 Add Files to SimpleTable，同时添加 Default.png 和 Default@2x.png 到项目中。

在你完成上述 *** 作之后，你会在项目中看到这两个文件，同时Xcode 自动识别文件作为启动图像。

开始测试！

再次运行App，这次在App运行的时候，你将会看到一个启动画面立即显示。因为在App启动的时候没有太多东西加载，因此启动画面仅显示1秒，并消失。

当前环境

OS: macOS High Sierra 10.13.5

Node: 8.11.3

Yarn: 1.7.0

npm: 5.6.0

Watchman: 4.9.0

Xcode: Xcode 9.4.1

react: 16.3.1 =>16.3.1

react-native: 0.55.4 =>0.55.4

react-native-splash-screen: 3.1.0 =>3.1.0

1：用Xcode打开项目, 找到Libraries目录，右键选择Add Files to [your project's name]

2：在{project}/node_modules/react-native-splash-screen/ios找到SplashScreen.xcodeproj文件，并添加

3：在XCode中，选择你的项目， 选择bilid Phases并将SplashScreen.xcodeproj/Products/libSplashScreen.a文件添加到Link Binary With Libraries中,拖过去即可

4：添加搜索路径：在项目 → Build Settings → Search Paths → Header Search Paths处添加一项为$(SRCROOT)/../node_modules/react-native-splash-screen/ios

1：在项目目录{prject}/android/下找到settings.gradle文件添加一下内容

2：在项目目录{prject}/android/app/下找到build.gradle文件添加compile project(':react-native-splash-screen')

3：找到项目目录{project}/android/app/src/main/java/com/app/下MainApplication.java文件，引入import org.devio.rn.splashscreen.SplashScreenReactPackage并添加new SplashScreenReactPackage()

1:找到项目目录{project}/ios/{project}/下AppDelegate.m文件，引入#import "SplashScreen.h"添加内容如下

2:在XCode中, 点击App/Images.xcassrts通过LaunchImage添加启动图片

3:在XCode中，选择你的项目， 选择General找到App Icons and Launch Images下的Launch Images Sourc选择你设置好的LaunchImage

4:如出现错误# unknown receiver 'SplashScreen'did you mean 'RNSplashScreen', 则改动源码以及AppDelegate.m文件如下：

        4.1.源码改动: 找到{project}/node_modules/react-native-splash-screen/ios文件夹下的RNSplashScreen.m文件，将其[SplashScreen show]修改为[RNSplashScreen show],如下图

  4.2:AppDelegate.m文件改动: 找到项目目录{project}/ios/{project}/下AppDelegate.m文件，将所有SplashScreen改为RNSplashScreen即可，如下图

4.3:重启尝试是否有其他问题，修改源码地址可查看我的 github 项目地址，更多问题请查看官方 issues

1:在项目目录{prject}/android/app/src/main/res/下创建layout文件夹

在layout文件夹下创建launch_screen.xml添加一下内容

2:将你的启动图改名为launch_screen.png并添加到{prject}/android/app/src/main/res/文件夹下相应的drawable文件夹中（根据需求配置相应大小的文件夹）

1.drawable-ldpi

2.drawable-mdpi

3.drawable-hdpi

4.drawable-xhdpi

5.drawable-xxhdpi

6.drawable-xxxhdpi

3：在{prject}/android/app/src/main/res/values/文件夹下修改名为添加一个名为primary_dark的属性并设置其颜，添加内容如下

4：如果您希望启动屏幕透明，打开{prject}/android/app/src/main/res/values/styles.xml并添加<item name="android:windowIsTranslucent">trueitem>到文件中

首先引入进行模块import SplashScreen from 'react-native-splash-screen'

使用SplashScreen.hide()方法将其关闭

---