アプリケーションのアイコンを追加し、管理する方法

この記事では、我々は、IOSとAndroidのための反応ネイティブアプリのアイコンの内外を議論する予定です.それは常にユーザーに公開されているので、アプリケーションのアイコンは、モバイルアプリケーションの重要なコンポーネントです.素晴らしいアプリのアイコンは、あなたのアプリケーションのインストール番号を改善することができますし、それが魅力的に設計されている場合、毎日アクティブなユーザーを高めることができます.反応ネイティブアプリケーションを構築している人は最終的にはApp Storeにそれらを公開する前に、彼らの携帯アプリに反応ネイティブアプリのアイコンを追加する問題を解決する必要があります.
必要なアプリケーションのアイコンを作成するには:

IOSとAndroidのためのPNGアイコン(私は、少なくとも1024 x 1024ピクセルのサイズでアイコンを使うことを強く勧めます)

また、さまざまなデバイスモデル間でさまざまな形状を表示することができますAndroid用の適応アイコンを作成することができますLearn More ). それを作成するには、フォアグラウンドのイメージと背景色やイメージが必要です.There そのようなアイコンをデザインする方法についても良い記事です.

このガイドでは、以下の資産を使用しますGitHub repository :

まずインストールする必要があります⭐ ️icon-set-creator :

$ npm install -g icon-set-creator
# OR
$ yarn global add icon-set-creator

インストール後、コマンドラインでIconSetバイナリにアクセスできます.あなたはそれが正しく実行して適切にインストールされていることを確認できますiconset , すべての利用可能なコマンドを一覧表示するヘルプメッセージを提示します.
これで、アイコンセットの作成者の設定ファイルを作成できます.クリエイトiconset.config.js あなたのアプリケーションのルートのファイルpackage.json 当社の資産のオプションを設定します.

imagePath — あなたがアプリケーションのランチャーアイコンとして使用するアイコン画像ファイルの場所.例えば./assets/icon.png

android/ios (オプション):true — 指定されたプラットフォームの既定の既存のフラッタランチャーアイコンをオーバーライドします.false — このプラットフォームのランチャーアイコンを無視します.icon_name — これは、古いデフォルトの既存のフラッタランチャーアイコンを削除せずに、指定した名前のプラットフォーム用の新しいランチャーアイコンを生成します.

imagePathAndroid — Androidプラットフォーム固有のアイコンイメージファイルの場所(省略可能)imagePath 使用される)

imagePathIos — IOSプラットフォームに固有のアイコンイメージファイルの場所imagePath 使用される)

次の2つの属性は、Androidランチャーアイコンを生成するときにのみ使用されます.

adaptiveIconBackground — 色"#ffffff" ) またはイメージ資産(例:"assets/images/dark-background.png" ) これは、適応アイコンの背景を埋めるために使用されます

adaptiveIconForeground — 適応アイコンのアイコンフォアグラウンドに使用されるイメージ資産

我々の例では、両方のプラットフォームのための1つのアイコンとAndroidのための適応アイコンを使用します.以下のように設定します.

/*iconset.config.js*/
module.exports = {
  imagePath: './assets/app-icon/icon.png',

  adaptiveIconBackground: './assets/app-icon/background.png',
  adaptiveIconForeground: './assets/app-icon/foreground.png'
};

🎉 以下のコマンドを入力し、完了です!

$ iconset create

あなたが望むならば、あなたはパッケージをpackage.json :

{
  "scripts": {
    "create-appicon": "iconset create"
  },
  "devDependencies": {
    "icon-set-creator": "latest"
  }
}

次の時間だけを入力することができますnpm run create-appicon コマンド.
🙌 読書ありがとう!閉じるこの動画はお気に入りから削除されていますfollow me on GitHub