react-native-splash-screen APP启动页设置

介绍：
react-native-splash-screen是个很好的管理react-native项目组件。

项目版本
react-native 0.61.5
react-native-splash-screen 3.2.0

安装

yarn add react-native-splash-screen

（貌似react-native版本 > 0.60 之后，安装第三方组件不需要再link，它会自动link）

配置

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文件中，将:react-native-splash-screen项目添加为编译时依赖项：

dependencies {
...
implementation project(':react-native-splash-screen')  //添加
}

3、更新MainApplication.java文件以react-native-splash-screen通过以下更改使用

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.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;
	}
}

4、修改MainActivity.java文件

import android.os.Bundle; // 添加
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // 添加
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // 添加

public class MainActivity extends ReactActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
    	SplashScreen.show(this);  // 添加
    	super.onCreate(savedInstanceState);
	}
	// ...other code
}

IOS

1、在XCode中的项目导航器中，右键单击Libraries➜Add Files to [your project’s name]

2、转到node_modules➜ react-native-splash-screen并添加SplashScreen.xcodeproj

3、在XCode的项目导航器中，选择您的项目。添加libSplashScreen.a到您项目的Build Phases➜Link Binary With Libraries
（本人添加后项目运行报错，后查资料github上说不用进行这步）

4、若提示’RNSplashScreen.h’ file not found，
选择项目→ Build Settings → Search Paths → Header Search Paths 双击添加:

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

5、在项目文件下AppDelegate.m文件中添加以下内容：

 #import "AppDelegate.h"
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
// #import "RNSplashScreen.h"  // 添加 （官网为添加这个，但我的项目会报错，改为下面这个就可以）
 #import <react-native-splash-screen/RNSplashScreen.h>  //添加 （添加这个无误）
 
 @implementation AppDelegate
 
  (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
	// ...other code

	[RNSplashScreen show];  // 添加
	// or
	//[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
	return YES;
}
@end

此为github上的错误解决办法，可用，链接

运行

无误正常运行后，需要在项目根目录下的index.js文件中加入一下代码，否则会一直停留在启动页面，无法正常操作app

import "react-native-gesture-handler"
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import SplashScreen from 'react-native-splash-screen';    //新增

AppRegistry.registerComponent(appName, () => {
	SplashScreen.hide();    //新增
	return App
});