我正在制作一个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

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

A.添加圆形图标： 在每个mipmap文件夹中，还向ic_launcher.png文件中添加一个ic_launcher_round.png具有相同大小的圆形版本。

B.删除圆形图标： 在内部yourProjectFolder/android/app/src/main/AndroidManifest.xml删除线android:roundIcon="@mipmap/ic_launcher_round"并保存。

否则，构建会引发错误。

我写了一个生成器，可以从一个图标文件自动为您的react native应用生成图标。它会生成您的资产，并将其正确添加到您的ios和android项目中：

更新（04/09/2019）

我们对发电机进行了更新，使其与生态系统标准保持一致。您现在可以使用@ bam.tech / react-native-make。

您可以 使用以下命令安装它：yarn add @bam.tech/react-native-make在react-native项目中

至 使用它 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有一个非常方便的图标资产向导。它具有很强的自我解释性，但有一些方便的作用，并且内置于：

您需要为iOS和Android使用不同大小的图标，例如Rockvic说。另外，如果有人感兴趣，我建议您使用此站点生成大小不同的图标。您无需下载任何内容，它可以完美运行。

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，ionicon等。

除了这些图标集，您还可以通过将图标打包为ttf文件，将自己的图标也带到react-native项目中，然后可以将该ttf直接导入到android和ios项目中。您可以利用相同的react-native-vector-icons库来管理这些图标

这是设置自定义图标的详细过程

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

您可以导入react-native-elements并使用超赞字体图标到您的react native应用程序

安装

npm install --save react-native-elements

然后将其导入您要使用图标的位置

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

像这样使用

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