expo initで作成したExpoプロジェクトでは、app.jsonというファイルを使うことで、アプリのアイコンや起動中の画面などの設定を簡単に行うことができる。

スプラッシュ

アプリ起動中に表示されるスクリーン画面のことをスプラッシュと言う。

Twitterなど主要なアプリでも使われており、起動するとアプリのロゴが全画面に表示されるのを見たことがある人も多いだろう。

従来のReact Nativeでスプラッシュを実装するのは少し面倒だったそうだが、Expoではapp.jsonによって簡単に基本的なスプラッシュを実装することができる。

app.jsonの設定

expo initで作成したばかりのプロジェクトで、app.jsonを開くとスプラッシュについて以下のような設定がされている。

"splash": {
  "image": "./assets/splash.png",
  "resizeMode": "contain",
  "backgroundColor": "#ffffff"
},

image、resizeMode、backgroundColorと3つの属性が設定されている。
一つずつ見ていこう。

image

初期ではassetsフォルダ内にあるsplash.pngという画像ファイルが参照されている。
ここに自分で作成したアプリのロゴ画像などを指定すると良いだろう。

resizeMode

画像の縦横比に関する設定。

初期ではcontainが設定されており、これは幅・高さのうち小さい方のサイズに合わせて画像をリサイズする。
リサイズ時に縦横比が変わることはない。

また、幅・高さのうち大きい方に合わせるcover、そして幅・高さ両方向いっぱいに画像を広げるstretch（縦横比は崩れる）を指定することもできる。

backgroundColor

背景色の設定を行う。