web-dev-qa-db-ja.com

React Nativeアプリにアイコンを追加する方法

私はReact Nativeアプリを作っています。アプリアイコン（アプリを起動するためにクリックするアイコン）をカスタマイズしたいです。私はこれをグーグルしましたが、私は異なるものを参照する異なるタイプのアイコンを見つけ続けています。アプリにこれらの種類のアイコンを追加するにはどうすればよいですか。

iconsreact-native
214
Adam Katz

iOSのアイコン

  • Images.xcassetsにAppIconを設定します。
  • 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。
    • ic_launcher.png内の144 * 144 mipmap-xxhdpi。
    • 192 * 192 ic_launcher.pngのmipmap-xxxhdpi。

アップデート2019アンドロイド

最新バージョンのreact nativeは、丸いアイコンもサポートしています。この場合、2つの選択肢があります。

A.丸いアイコンを追加します。 各ミップマップフォルダに、同じサイズのic_launcher.pngという丸いバージョンをic_launcher_round.pngファイルに追加します。

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

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

370
Rockvic

私は単一のアイコンファイルからあなたの反応するネイティブアプリのアイコンを自動的に生成するジェネレータを書きました： https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-iconsシングルインコマンドライン 。

それはあなたの資産を生成し、それはまたあなたのIOSとAndroidのプロジェクトにそれらを正しく追加します。

それをインストール

node 6をインストールし、image-magickをインストールする必要があります。

それから generator をインストールしてください

npm install -g yo generator-rn-toolbox

これを使って

どこかに準備ができて単一のアイコンファイルを持っています。アイコンは1024 x 1024のサイズにする必要があります。

それからReact Nativeプロジェクトで、以下を実行します。

yo rn-toolbox:assets --icon <path to your icon>
# For instance
yo rn-toolbox:assets --icon ../icon.png

反応ネイティブプロジェクトの名前を尋ねられます。たとえば、react-native init MyAwesomeProjectを使用してプロジェクトを作成した場合、プロジェクト名はMyAwesomeProjectです。

? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?と聞かれたら、Yと答えてください。

そして...それはそれだ！

それが他の人に役立つことを願っています:)

253
Almouro

私はサービスを使ってアイコンを正確に縮尺します。 http://makeappicon.com/ はよさそうだ。小さい画像を拡大すると、大きいアイコンがピクセル化される可能性があるため、大きいサイズの画像を使用してください。そのサイトはあなたにiOSとAndroidの両方のためのサイズを与えるでしょう。

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

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

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

28
rmevans9

この人のアドバイス そして を使って - - Android Asset Studio

ここでは、リンクが切れた場合に転記します。

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

1） Android Asset Studio に画像をアップロードします。適用する効果を選びます。このツールはあなたのためにZipファイルを生成します。ダウンロード.Zipをクリックします。

2）あなたのマシン上でファイルを解凍してください。それからあなたがあなたの/Android/app/src/main/res/フォルダにあなたが欲しいイメージの上にドラッグしてください。各画像を必ず正しいサブフォルダに入れてくださいmipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

Android/app/src/main/res

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

20
mixophrygian

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

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

私はそれを使いました。 512×512のPNGを作成し、それからそのツールとブームを実行しました。超簡単です。

9
jcollum

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

enter image description here

6
Ryan Knell

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

https://resizeappicon.com/ /

それが役に立てば幸い。

5
jakobinn

エキスポを使用している場合は、プロジェクトに1024 x 1024 pngのファイルを配置し、app.jsonにiconプロパティを追加してください（例： "icon"： "./src/assets/icon.png"）。

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

1
Ramon Schmitt

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

1
ishab acharya

あなたはreact-native-elementsをインポートし、あなたの反応するネイティブアプリにフォント素晴らしいアイコンを使うことができます。

インストール

npm install --save react-native-elements

それからあなたがアイコンを使いたい場所をインポートしてください。

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

好きに使う

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

プロジェクトにアイコンをインポートするには、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

0
Manzoor Samad