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

详细的介绍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);