React Nativeでスプラッシュスクリーンを表示する方法

はじめに

React Nativeでアプリを開発しているものです。
自分が忘れないよう、また調べるのはめんどくさいので、React Nativeでスプラッシュスクリーンの表示の仕方について整理してみました。

1. 必要なパッケージのインストール

React Nativeでスプラッシュスクリーンを表示・非表示するには、下記のパッケージを
インストールする必要があります。
パッケージの詳細はこちら

$npm i react-native-splash-screen --save
$react-native link react-native-splash-screen

2.iOSについて

2.1 ネィティブコードの修正

まず、cdコマンドで下記のディレクトリへ移動します。
そして、その配下にあるAppDelegate.mファイルを開きます。

$cd プロジェクト名/ios/プロジェクト名/

起動時にスプラッシュ画像を表示するには、ネイティブのソースを修正する必要があるため、AppDelegate.mファイルにソースを追加します。

AppDelegate.m

# import "AppDelegate.h"

# import <React/RCTBundleURLProvider.h>
# import <React/RCTRootView.h>
# import "RNSplashScreen.h"  //追記！

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // 追記！
    return YES;
}

@end

2.2 Xcodeで設定ファイルの設定方法

表示するスプラッシュスクリーンの設定についての説明になります。
大きく分けて、３パターンあります。
(1) Images.xcasssetsのLaunchImageで設定する方法
(2) LaunchScreen.xibまたはLaunchScreen.storyboardで設定する方法
(3) SplashViewControllerで設定する方法

（１）についての設定方法については、こちらの記事がわかりやすく解説してあります。
自分もこちらを参考にしました。
https://qiita.com/TD3P/items/fabfdf7e39551ee89e59

(2),(3)についてはこちらを参考にしました。
https://qiita.com/k-boy/items/7de88a834bf01a6e858f

3.Androidについて

3.1 ネィティブコードの修正

まず、以下のファイルを作成します。
android/app/src/main/res/layout/launch_screen.xml

作成したらファイルに下記のコードを追加します。

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>

次にandroid/app/src/main/res/配下に下記のフォルダを作成します。

• drawable-xhdpi
• drawable-xxhdpi

作成したら、このフォルダの中にスプラッシュ画像を入れます。
画像の名前はlaunch_screen.pngにしてください。

4. アプリ起動後、スプラッシュ画像を非表示にする

アプリ起動後に、スプラッシュ画像を非表示したいので、一番最初に呼ばれるApp.jsでコンポーネントをマウントできたらスプラッシュを消すように処理を加えます。

App.js

import React, {Component} from 'react';
import { View, Text } from 'react-native';
import SplashScreen from 'react-native-splash-screen';

export default class App extends Component{
  //コンポーネントがマウントされた時に実行されるメソッド
  componentDidMount() {
    SplashScreen.hide();  //スプラッシュスクリーンを非表示にする
  }

  render() {
    return (
      <View>
        <Text>Hello World</Text>
      </View>
    );
  }
}

ここまでできたら、react-native runコマンドまたは、.xcodeprojからビルドして確認すると、スプラッシュ画像が最初に表示されるようになります。

もし、表示されない場合は、一度アプリをアンインストールするか、シミュレータの場合、[Heardware]->[Erase All Content and Setting..]を実行してから再度ビルドするとうまく行くはずです。