使用第三方插件: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 <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#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