react-native 启动页设置（ios）

使用第三方插件：react-native-splash-screen

下载地址：https://www.npmjs.com/package/react-native-splash-screen

第一步：安装下载插件

1、npm i react-native-splash-screen --save
2、react-native link react-native-splash-screen  // 自动链接了，就不用手动配置了哈

第二步：配置ios

#import "AppDelegate.h"
 
#import 
#import 
#import "RNSplashScreen.h"  // here
 
@implementation AppDelegate
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code
 
    [RNSplashScreen show];  // here
    return YES;
}
 
@end

第三步：进入xcode进行操作（把rn项目的ios目录拖进xcode就行哈）

说明一下哈，以下就是借用的其他博主的哈，关键是这个博主写的很详细啦～～～如有冒犯请告知哈

简书地址：https://www.jianshu.com/p/4540ac17dfd4  

简书昵称：墨子攻城

1、选中Image.xcassets ➜ LaunchImage，就是上一步创建的LaunchImage，右侧框中的部分是让你选择要支持的系统，横竖屏之类的（这个按照需求选择，如果你的项目不打算支持ios6可以不选择）。然后点击中间部分选中一个分辨率的框，上传相应分辨率的图片作为启动屏幕（注意：这里的分辨率一定要对，如果比例不对传不上去）

以下是选择框中不同屏幕的分辨率：

iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x
iPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2x
iPhone Portrait iOS 7,8-2x （640×960） @2x
iPhone Portrait iOS 7,8-Retina 4 （640×1136） @2x
iPhone Portrait iOS 5,6-1x （320×480） @1x
iPhone Portrait iOS 5,6-2x （640×960） @2x
iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x

 

2、选中LaunchScreen.xib,会有个弹出框，默认选择确定就行，然后把右边的 Use Launch Screen 取消选中（因为ios可以用来自定义图片启动屏幕或通过 LaunchScreen.xib花一个启动屏幕，ios默认花了一个，因为我们用的是图片所以要取消它）。

 

3、如图选中项目工程，右侧会出现工程的基本配置，设置Launch Images Srouce配置为LaunchImage（如果没有LaunchImage会弹出一个框提示拷贝图片，按照默认点确定就行），然后设置Launch Screen File为空（这个很重要）。

 

 

4、预览效果（上传后图片被删帧压缩太狠，效果不佳，凑合看把）

第四步：关闭启动页咯

这个就看自己需要在哪里关闭哈

 componentDidMount() {
    SplashScreen.hide(); // 关闭启动页
  }

作者：墨子攻城
链接：https://www.jianshu.com/p/4540ac17dfd4