有效好用组件之启动屏react-native-splash-screen

来源：互联网发布：内增高女鞋皮面淘宝编辑：程序博客网时间：2024/06/05 15:01

详细的介绍react-native-splash-screen。

一、下载 React-native-splash-screen

在项目根目录打开终端运行

npm react-native-splash-screen --save

二、安装(自动安装或手动安装)

自动安装终端运行：

react-native link react-native-splash-screen ||rnpm link react-native-splash-screen

手动安装在这里不多说了。去github里有详细的介绍react-native-splash-screen。

三、IOS配置.

1.在项目中 → Build Settings → Search Paths → Header Search Paths 中添加:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

2.你应该添加以下代码到AppDelegate. m

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

3.IOS可以用来自定义启动屏幕或通过 LaunchScreen.xib设置启动屏幕。

4.在.js文件的启动页中添加

import {    StyleSheet,    View,    Text,    InteractionManager,    Platform,} from 'react-native'

import SplashScreen from 'react-native-splash-screen'

然后在componentDidMount中添加

this.timer = setTimeout(() => {    InteractionManager.runAfterInteractions(() => {        SplashScreen.hide();        navigator.resetTo({            component: HomePage,            name: 'HomePage',        });    });}, 2000);

1 0