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 getPackages() {
        	return Arrays.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
4、ヒント"RNSplashScreen.h’file not found,選択項目→Build Settings→Search Paths→Header Search Pathsダブルクリック追加:
$(SRCROOT)/../node_modules/react-native-splash-screen/ios

5、プロジェクトファイルの下でApplegate.mファイルに次の内容を追加します.
 #import "AppDelegate.h"
 #import 
 #import 
// #import "RNSplashScreen.h"  //    (       ,        ,         )
 #import   //   (      )
 
 @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
});