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 <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

猜你喜欢

转载自blog.csdn.net/qq_39524670/article/details/83020384