如何将图标添加到 React Native 应用程序 [英] How to add icons to React Native app

问题描述

我正在制作一个 React Native 应用程序.我想自定义应用程序图标(即您单击以启动应用程序的图标).我在谷歌上搜索过这个，但我一直在寻找不同类型的图标来指代不同的事物.如何将这些类型的图标添加到应用中?

I am making a React Native app. I would like to customize the app icon (meaning the icon that you click on to start the app). I have Googled this, but I keep finding different types of icons that refer to different things. How do I add these types of icons to the app?

推荐答案

iOS 图标

• 在 Images.xcassets 中设置 AppIcon.
• 添加 9 个不同大小的图标:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

  iOS Icons

  • Set AppIcon in Images.xcassets.
  • Add 9 different size icons:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

    Images.xcassets 看起来像这样:

    • 将 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 中.
      • Put ic_launcher.png in folders [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
        • 72*72 ic_launcher.png in mipmap-hdpi.
        • 48*48 ic_launcher.png in mipmap-mdpi.
        • 96*96 ic_launcher.png in mipmap-xhdpi.
        • 144*144 ic_launcher.png in mipmap-xxhdpi.
        • 192*192 ic_launcher.png in mipmap-xxxhdpi.

        最新版本的 react native 也支持圆形图标.对于这种特殊情况，您有两种选择:

        The latest versions of react native also supports round icon. For this particular case, you have two choices:

        A.添加圆形图标:在每个 mipmap 文件夹中，另外向 ic_launcher.png 文件添加一个名为 ic_launcher_round.png 的圆形版本，具有相同的大小.

        A. Add round icons: In each mipmap folder, add additionally to the ic_launcher.png file also a round version called ic_launcher_round.png with the same size.

        B.移除圆形图标:在 yourProjectFolder/android/app/src/main/AndroidManifest.xml 中删除行 android:roundIcon="@mipmap/ic_launcher_round" 并保存.

        B. Remove round icons: Inside yourProjectFolder/android/app/src/main/AndroidManifest.xml remove the line android:roundIcon="@mipmap/ic_launcher_round"and save it.

        否则构建会引发错误.

        这篇关于如何将图标添加到 React Native 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！