React Nativeアプリを作成しています。アプリのアイコン（アプリを起動するためにクリックするアイコン）をカスタマイズしたいと思います。私はこれをグーグルで検索しましたが、さまざまなものを参照するさまざまなタイプのアイコンを探し続けています。これらのタイプのアイコンをアプリに追加するにはどうすればよいですか？

iOSアイコン

• で設定AppIconしImages.xcassetsます。
• 9つの異なるサイズのアイコンを追加します。
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3。

Images.xcassets このようになります：

Androidアイコン

• ic_launcher.pngフォルダに入れます[ProjectDirectory]/android/app/src/main/res/mipmap-*/。
  • 72 * 72 ic_launcher.pngの中でmipmap-hdpi。
  • 48 * 48 ic_launcher.pngの中でmipmap-mdpi。
  • 96 * 96 ic_launcher.pngの中でmipmap-xhdpi。
  • 144 * 144 ic_launcher.pngの中でmipmap-xxhdpi。
  • 192 * 192 ic_launcher.pngの中でmipmap-xxxhdpi。

2019 Androidを更新

反応ネイティブの最新バージョンも丸いアイコンをサポートしています。この特定のケースでは、2つの選択肢があります。

A.丸いアイコンを追加する： 各ミップマップフォルダーで、同じサイズでic_launcher.png呼び出される丸いバージョンもファイルに追加しますic_launcher_round.png。

B.丸いアイコンを削除する： 内側yourProjectFolder/android/app/src/main/AndroidManifest.xmlで線android:roundIcon="@mipmap/ic_launcher_round"を削除して保存します。

それ以外の場合、ビルドはエラーをスローします。

単一のアイコンファイルからリアクションネイティブアプリのアイコンを自動的に生成するジェネレーターを作成しました。アセットを生成し、iOSおよびAndroidプロジェクトに正しく追加します。

アップデート（2019年4月9日）

ジェネレーターを刷新して、エコシステムの基準に合わせて最新の状態にしました。これで@ bam.tech / react-native-makeを使用できます。

次を使用してインストールできます：yarn add @bam.tech/react-native-make反応ネイティブプロジェクト

するためにそれを使用します react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

以上です！他の人にも役立つことを願っています:)

推奨事項：

• 1024x1024ベース画像
• iOSの透明な背景なし
• 以下のアイコン適応アイコンのガイドライン Android向けの

以前のツールに対するいくつかの改善点は次のとおりです：🥳

• Yeomanへの依存関係はありません。react-native-cliプラグインになりました
• Image Magickに依存しない
• Android用のアダプティブアイコンを作成します
• iOSに不足しているアイコンサイズを追加

サービスを使用してアイコンを正しくスケーリングします。http://makeappicon.com/は良いようです。小さい画像を拡大すると、大きいアイコンがピクセル化される可能性があるため、大きいサイズの画像を使用します。そのサイトは、iOSとAndroidの両方のサイズを提供します。

そこからは、通常のネイティブアプリと同じようにアイコンを設定するだけです。

https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7

Androidアプリケーションのアイコンを設定

このガイのアドバイスに従ってAndroid Asset Studioを使用することで、反応ネイティブのAndroidプロジェクトにアプリアイコンを追加できました

これは、リンクが切れた場合に備えて書き起こされたものです。

React-Native Androidでアプリケーションアイコンをアップロードする方法

1）画像をAndroid Asset Studioにアップロードします。適用するエフェクトをすべて選択します。ツールがzipファイルを生成します。ダウンロード.Zipをクリックします。

2）マシンでファイルを解凍します。次に、目的の画像を/android/app/src/main/res/フォルダにドラッグします。各画像を適切なサブフォルダに配置してくださいmipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3）（最初に行ったように）単純にフォルダ全体をresフォルダにドラッグアンドドロップしないでください。あなたがあなたの/res/values/{strings,styles}.xmlファイルを完全に削除しているかもしれないので。

誰かがこのタスクのためだけに非常に使いやすいツールを作成しました：https : //www.npmjs.com/package/app-icon

このシンプルなツールを使用すると、反応ネイティブプロジェクトに単一のアイコンを作成し、そこから必要なすべてのサイズのアイコンを作成できます。現在、iOSおよびAndroidで動作します。

私はそれを使いました。512x512 pngを作成し、そのツールとブームを実行しました。超簡単。

少し遅れましたが、Android Studioには非常に便利なアイコンアセットウィザードがあります。非常に自明ですが、いくつかの便利な効果とその組み込み機能があります。

Rockvicが言ったように、iOSとAndroidには異なるサイズのアイコンが必要です。また、興味のある方は、このサイトでサイズの異なるアイコンを生成することをお勧めします。何もダウンロードする必要はなく、完全に機能します。

https://resizeappicon.com/

それが役に立てば幸い。

これは、アイコンとスプラッシュスクリーンを生成するためのより良いサイトを見つけるのに苦労している人々に役立ちます

• アプリアイコンを作成（androidとiosの両方に便利）
• APEツール（androidとiosの両方に便利）
• アイコンセットの作成者（iOSでのみ有用）
• Andoid Asset Studio（Androidでのみ便利+推奨*）

expoを使用している場合は、プロジェクトに1024 x 1024のpngファイルを配置し、app.jsonにアイコンプロパティを追加します。つまり、「icon」：「./src/assets/icon.png」

https://docs.expo.io/versions/latest/guides/app-icons

プロジェクトにアイコンをインポートするには、react-native-vector-iconsを使用することをお勧めします。ベクトルアイコンを使用するので、アイコンのスケーリング側でそれほど心配する必要はありません。パッケージを使用している間、fontawesome、ioniconsなどの一般的なアイコンセットをすべて使用できます。

これらのアイコンセットの他に、アイコンをttfファイルとしてパックすることで、独自のアイコンも反応ネイティブプロジェクトに取り込むことができ、そのttfをandroidプロジェクトとiosプロジェクトの両方に直接インポートできます。同じreact-native-vector-iconsライブラリを使用して、これらのアイコンを管理できます

カスタムアイコンを設定する詳細な手順は次のとおりです

https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

react-native-elementsをインポートし、font-awesomeアイコンを使用して、reactネイティブアプリを使用できます。

インストール

npm install --save react-native-elements

次に、アイコンを使用する場所にインポートします

import { Icon } from 'react-native-elements'

好きに使う

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}