React NaitveでAppアイコン & Splashイメージを作る方法

2019-10-20

react-native-makeライブラリを使ってAppアイコンやSplashイメージを生成する方法について説明します。

概要

React NativeでAppアイコンとSplashイメージを作るため, 今までgenerator-rn-toolboxを使っていました。これに関しては下記のブログを確認してください。

今までgenerator-rn-toolboxを良く使ってましたが、generator-rn-toolboxを開発した方が、親切に私のブログまで来て新しライブラリを作ったと教えてくれました。

react-native-makeを使ってAppアイコンやSplashイメージを生成 - 開発者のコメント

確認して見たらgenerator-rn-toolboxはDeprecatedされて、新しくreact-native-makeを開発して提供しておりました。

今回のブログではreact-native-makeを使ってアプリアイコンやSplashイメージを生成する方法について調べるし、既存のライブラリより良くなった部分も調べてみます。

react-native-makeインストール

下記のコマンドを使ってreact-native-makeをインストールします。

npm install --save-dev @bam.tech/react-native-make

これでreact-native-makeを使う準備が終わりました。以前のgenerator-rn-toolboxと少し比べると下記のようです。

generator-rn-toolboxをインストールするときは下記のようにグローバルでインストールしましたし、

npm install -g yo generator-rn-toolbox

下記のようにimagemagickと言うライブラリをインストールする必要がありました。

brew install imagemagick

これと比べて今回のreact-native-makeはローカルでインストールするし、追加で他のライブラリをインストールする必要もありません。

Appアイコン

react-native-makeを使ってアプリアイコンを生成する時は1024x1024 pxサイズのpngファイルが必要です。

アイコンファイルが準備できたら下記のコマンドを使ってAppアイコンを生成します。

# react-native set-icon --path [path-to-image]
react-native set-icon --path [path-to-image] --background ["color"]

例えば下記のようです。

# react-native set-icon --path ./src/Assets/images/app_icon.png
react-native set-icon --path ./src/Assets/images/app_icon.png --background "#FFFFFF"

Splashイメージ

react-native-makeを使ってSplashイメージを生成するためには最小3000x3000pxサイズのpngファイルが必要です。

Splashイメージファイルが準備できたら、下記のコマンドを使ってSplashイメージを生成します。

# react-native set-splash --path [path-to-image]
# react-native set-splash --path [path-to-image] --resize [contain|cover|center]
react-native set-splash --path [path-to-image] --resize [contain|cover|center] --background ["background-color"]

例えば下記のようです。

# react-native set-splash --path ./src/Assets/images/splash.png
# react-native set-splash --path ./src/Assets/images/splash.png --resize cover
react-native set-splash --path ./src/Assets/images/splash.png --resize center --background "#FFFFFF"

ここではresizeオプションがありますがデフォルトはcontainです。また、Coverオプションを使う場合は、重要なイメージが切れないようするため、Splashイメージを作る時重要イメージがバックグラウンドイメージの1/3 paddingところに位置するようにします。

オプションによるイメージの状態は下記のリンクで確認することができます。

私は主に単色じゃない背景があるSplashイメージを使っております。この時はcoverオプションを使って生成すると綺麗なSplashイメージを生成することができました。

react-native-splash-screen

このようにSplashイメージを作ってアプリに適用する理由はこのSplashイメージを使ってSplashイメージを表示してその裏でログイン処理をしたり、データー送受信処理をしたりするためですよね?

このためreact-native-makeはreact-native-splash-screenを使うようにしております。

react-native-makeだけではなくReact NativeでSplashイメージをコントロールする時には、react-native-splash-screenを使ったら結構便利です。これに関して作成したブログがありますので、下記のリンクをご確認してください。

完了

一人でデザインするし、開発する私にはAppアイコンとSplashイメージを作る時、generator-rn-toolboxを良く使いました。今回、新しくできたreact-native-makeも本当に助かると思います。

皆さんもreact-native-makeを使ってもっと簡単にアプリアイコンやSplashイメージを生成してみてください。

Buy me a coffeeBuy me a coffee
Posts