Naoki Otsu

React NativeでiOSとAndroidのアプリのアイコンを変更する

2018-11-23

ReactNativeというわけではないけど、iOSとAndroidのアプリのアイコンをデフォルト画像から自前で準備したアイコンに設定する時のメモ。と言っても驚くほど簡単だった。

アプリのアイコン画像を準備する

まずは画像の準備から。
アイコンサイズは 1024 x 1024 で準備しとく。

たぶんPhotoshopやXDを使って作成すると、サイズ別で書き出しが出来ると思うけど、それらが無い場合はそれぞれのサイズに書き出してくれるWebサービスを使っても出来そう。パッと試したい時とか。

使ったのは下記のサービス
App Icon Resizer

ここに画像をアップロードすると、iOS,Androidに必要なアイコンをサイズ別でダウンロードすることが出来る。これらをダウンロードして手元に持っておく。

iOSでアプリのアイコンを設定する

iOSの場合はXCodeからアイコン設定出来る
Xcodeでプロジェクトを開く(/ios/hoge.xcodeprojをXcodeで開く)

下記のキャプチャのように images.xcassetsAppIcon をクリックすると、サイズ別にアプリアイコンが設定出来るので、そこに画像をドラッグ&ドロップで格納していく。

これでreact-native run-iosして、シミュレーター上でもアイコンが変更されてたらOK!

Andoirdでアプリのアイコンを設定する

Android側はAndroid Studioは使わない。ディレクトリに画像を入れるのみ。入れる場所は、/android/app/src/main/res/の直下に、
mipmap-mdpi
mipmap-hdpi
mipmap-xhdpi
mipmap-xxhdpi
mipmap-xxxhdpi
のサイズ別のディレクトリがあって、すでにデフォルトのアプリアイコンの画像が格納されているので、そこの画像を差し替えする。

画像サイズは下記のように格納する
mdpi → 48 x 48
hdpi → 72 x 72
xhdpi → 96 x 96
xxhdpi → 144 x 144
xxxhdpi → 192 x 192

このmipmap-mdpiなどのディレクトリ名とic_launcher.pngのファイル名は変更出来て、android/app/src/main/AndroidManifest.xmlandroid:icon="@mipmap/ic_launcher"で管理されている。

またAndroid7.1からはアプリアイコンに丸いアイコンが追加されてAndroidManifest.xmlで従来のアイコンの他にandroid:roundIcon="@mipmap/ic_launcher_round"を指定しておくと、対応デバイスで丸いアイコンが表示されるようになったもよう。

差し替えた状態でreact-native run-androidしてシミュレーター上でもアプリアイコンが変わっていたらOK!

シミュレーターでうまくいってたら実機側も問題なくアイコン画像変わってた! おしまい。