app閃屏是一個常見的需求主守，今天我們來說一下使用 react-native-splash-screen組件實現(xiàn)閃屏功能。

一尸疆、具體使用

（一）安裝

1. 使用安裝命令npm i react-native-splash-screen --save進行安裝
2. 使用命令react-native link react-native-splash-screenlink

注：我安裝的版本是3.0.0侧馅，最新版用法請查看react-native-splash-screen

iOS

1. 在Xcode中點擊Library，選擇Add Files to [your project's name]食棕，選擇node_modules ? react-native-splash-screen 添加SplashScreen.xcodeproj

sybil052-20180906-14381.png

2. 在Build PhasesLink ? Binary With Libraries中添加libSplashScreen.a

sybil052-20180906-143957.png

3. 在Build Settings ? Search Paths ? Header Search Paths中添加$(SRCROOT)/../node_modules/react-native-splash-screen/ios

sybil052-20180906-144153.png

Android

1. 找到android/settings.gradle文件朗和，添加如下代碼：

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2. 在android/app/build.gradle文件中，添加如下代碼：

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

3. 在 MainApplication.java中添加如下代碼：

// 3.0.1以下版本
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new SplashScreenReactPackage()  // 這里添加
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

（二）使用

iOS

1. 在AppDelegate.m中添加：

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "SplashScreen.h"  //這里添加

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...其他代碼

    [SplashScreen show];  // 這里添加
    return YES;
}

@end

2. 將閃屏圖片放入LaunchScreen.xib

Android

1. 在MainActivity.java中添加：

import com.cboy.rn.splashscreen.SplashScreen; //這里添加

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 這里添加
        super.onCreate(savedInstanceState);
    }
    // ...其他代碼
}

2. 在app/src/main/res/layout中新建launch_screen.xml簿晓，添加如下代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splash">
</LinearLayout>

3. 將閃屏圖片放入以下目錄：

• mipmap-hdpi
• mipmap-mdpi
• mipmap-xhdpi
• mipmap-xxhdpi
• mipmap-xxxhdpi

最后眶拉，在splash.js中添加如下代碼：

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

export default class WelcomePage extends Component {

    componentDidMount() {
        SplashScreen.hide();
    }
}