【ReactNative】スプラッシュ画像の設定(自分メモ)

react-native-splash-screenを使う
参考

導入

yarn add react-native-splash-screen
cd ios
pod install
or
npx pod-install ios

ios

スプラッシュ画面のファイルは
ios/[プロジェクト名]/LaunchScreen.storyboard
subviews、constraintsの削除をしておく

ios/[ProjectName]/AppDelegate.m

...
#import "RNSplashScreen.h" // add

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [RNSplashScreen show]; // add
    return YES;
}

@end

Android

./android/app/src/main/java/com/apng/MainApplication.java:
プロジェクト名/android/app/src/main/java/com/プロジェクト名/MainActivity.java　を以下の様に修正

import android.os.Bundle; //追加
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; //追加


public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected void onCreate(Bundle savedInstanceState) { //追加
    SplashScreen.show(this); //追加
    super.onCreate(savedInstanceState); //追加
  } //追加

色設定用

cd プロジェクト/
touch ./android/app/src/main/res/values/colors.xml
cd ./android/app/src/main/res/
mkdir layout drawable-xhdpi drawable-xxhdpi drawable-xxxhdpi

colors.xmlが出来たので以下の設定

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splashscreen_bg">#283c55</color>
    <color name="app_bg">#283c55</color>
</resources>

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/launch_screen">
</LinearLayout>

drawableはそれぞれのディレクトリにlaunch_screen.pngを入れる。

種別 解像度(w*h)
ldpi 200 x 320
mdpi 360 x 640
hdpi 480 x 800
xhdpi 720 x 1280
xxhdpi 1080 x 1920
xxxhdpi 1440 x 2560