如何在React Native应用中添加图标

Question

如何在React Native应用中添加图标

iconsreact-native

357

我正在开发一个React Native应用程序，想要自定义应用图标（指启动应用的点击图标）。我已经搜索过谷歌，但是找到的是不同类型的图标，涉及不同的东西。我该如何将这些类型的图标添加到应用程序中？

- Adam Katz

这是为iOS、Android还是两者都设计的？ - rmevans9

3

现在是针对iOS，但最终会包括两个操作系统。 - Adam Katz

请参考以下答案：https://dev59.com/OW435IYBdhLWcg3wigyx#11845815 - PallavBakshi

17个回答

349

我编写了一个生成器，可以从单个图标文件中自动生成你的React Native应用程序所需的图标。它会为你生成资源，并将它们正确地添加到你的iOS和Android项目中。

更新（04/09/2019）：

我们重新设计了我们的生成器，以符合生态系统标准。现在，你可以使用@bam.tech/react-native-make。

你可以通过在React Native项目中运行“yarn add @bam.tech/react-native-make”来安装它。

要使用它，请运行“react-native set-icon --path --background --platform ”。

就是这样！希望对其他人有用 :)

建议：

- 1024x1024基本图像 - iOS无透明背景 - 遵循自适应图标指南的图标适用于Android。

以下是一些改进，相较于以前的工具：

不依赖Yeoman，现在是一个react-native-cli插件
不依赖Image Magick
为Android创建自适应图标
为iOS添加缺失的图标尺寸

- Almouro

15

这应该是被接受的答案。你为我节省了大量时间！作为应用程序开发者，我们真的不关心iOS和Android需要多少个图标，因为9个图标和4个图标的所有内容都是相同的，谁在乎呢？对于视网膜屏幕还是非视网膜屏幕，对于大屏幕还是小屏幕，谁在乎呢？只需给我清晰而完全相同的图标，就这样！谢谢，我想尝试你的其他工具。 :) - Zhang Buzz

4

我发现了问题：在安装ImageMagick时，确保安装遗留工具，这样convert命令才会存在。 - Rick Love

2

@RickLove 我也在使用 yarn -g add imagemagick 安装 imagemagick 后遇到了这个问题。然后我改用 homebrew 安装 (brew install imagemagick)，它会安装所有必要的依赖并且可以正常工作。 - BeniaminoBaggins

1

@PolaEdward 不需要使用 Ruby :) 所有要求都在这里：https://github.com/bamlab/generator-rn-toolbox/blob/master/generators/assets/README.md#requirements - Almouro

1

它非常有帮助，但是否有任何方式也添加圆形图标呢？这些库只为Android添加普通图标。再次感谢您。 - Amir Hedieh

显示剩余10条评论

34

我将使用服务来正确缩放图标。 http://makeappicon.com/ 看起来很不错。使用较大尺寸的图像进行缩放，否则较小图像的缩放可能会导致更大的图标出现像素化问题。该网站会为您提供iOS和Android的大小。

从那里开始，只需要像设置普通本机应用程序一样设置图标。 https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7 为Android应用程序设置图标

- rmevans9

1

苹果的链接已经失效了，@rmevans9. :( - Adam K Dean

3

请注意，该服务会收集关于您的信息，比如应用名称、应用市场分类等，并且除非提供电子邮件地址，否则会阻止图片下载。 - tim-montague

我已经阅读了这个答案，但是一段时间后才看到Almouro在下面的回答。我希望我最开始就看Almouro的回答。 - Yossi

28

我按照这位先生的建议，并使用Android Asset Studio，成功地将应用程序图标添加到了我的react-native安卓项目中。

以下是转录，以防链接失效:

如何在React-Native Android中上传应用程序图标

1）在Android Asset Studio上上传您的图像。选择您想要应用的任何效果。该工具会为您生成一个zip文件。点击Download .Zip。

2）在您的计算机上解压该文件。然后将您想要的图像拖到/android/app/src/main/res/文件夹中。确保将每个图像放在正确的子文件夹mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.中。

3）不要像我最初那样天真地将整个文件夹拖放到您的res文件夹中。否则可能会删除您的/res/values/{strings,styles}.xml文件。

- mixophrygian

15

Android Studio有一个非常方便的图标素材向导，称为Image Asset Studio（用户指南在此）。它相当易于理解，具有一些实用效果，并且已经内置其中：

来自Windows 10上Android Studio 4.1.3的屏幕截图

- Ryan Knell

1

你在Android Studio中构建React Native项目吗？ - Adam Katz

1

不，但我经常因为某种原因需要打开它。XCode也是一样的 - 最终你需要跨越到另一边。这是我用来在几秒钟内生成高质量图标集的方法，非常惊讶它有如此强烈的反应。该死的 - 我甚至拥有自己的开源项目来为移动应用程序生成图标，但我仍然更喜欢这种方法。https://www.npmjs.com/package/cordova-media-generator - Ryan Knell

这太棒了 - 它还美化了图标，我觉得非常有帮助（就像这个答案！）。 - Bilal Akil

太棒了！不错！ - barrylachapelle

我需要使用sudo安装“node”才能使用它。请阅读此答案：https://dev59.com/puk5XIcBkEYKwwoY9-hg#63073599 - Henrique Bruno

显示剩余2条评论

13

有人为这项任务制作了一个非常易于使用的工具：https://www.npmjs.com/package/app-icon

这个简单的工具允许你在React Native项目中创建一个单一的图标，然后从它创建所有必需大小的图标。目前它适用于iOS和Android。

我用过它。制作了一个512x512的png图像，然后运行该工具，哇，完成了。超级简单。

- jcollum

2

PS：react-native-icon已被标记为弃用，并更名为app-icon；https://www.npmjs.com/package/app-icon - Eirik H

1

我在安装Almouro的回答中提到的react-native-make时遇到了麻烦。然后我发现这个app-icon可以被正确地安装，而且它很简单并且运行良好。 - Chenhua

1

感谢 @EirikH 的纠正。 - jcollum

8

你需要为iOS和Android准备不同大小的图标，就像Rockvic说的那样。此外，如果有人感兴趣，我推荐这个网站生成不同大小的图标。你不需要下载任何东西，它完美地工作。

https://resizeappicon.com/

希望它有所帮助。

- jakobinn

8

这对于那些正在寻找更好的网站来生成图标和启动画面的人非常有帮助

Make App Icon (对Android和iOS都有用)
APE工具 (对Android和iOS都有用)
图标设置创建器 (仅适用于iOS)
Andoid Asset Studio(仅适用于Android + 推荐*)

- ishab acharya

7

2022更新

由于Almouro的答案已不再维护

Android和iOS图标

现在您可以使用一个命令为iOS和Android生成带有圆角图标的图标：

npx icon-set-creator create ./path/to/icon.png

我强烈建议使用大小至少为1024x1024像素的图标。

自适应Android图标

npx icon-set-creator create -b <background> -f <foreground> -A

背景 - 颜色（例如“#ffffff”）或图像资源（例如“assets/images/christmas-background.png”）

前景 - 图像资源（例如“assets/images/christmas-foreground.png”）

- martiliones

谢谢，我在自适应 Android 图标上遇到了“ERROR No image path was specified for android”的问题，你有任何想法是为什么吗？ - Tahola

5

修改 Android 应用图标的步骤： 前往该网站 https://appicon.co/

上传图片并生成图标，然后下载
解压文件夹
在文件夹内复制 AppIcons/android/ 下所有文件夹（包括这些文件夹：mipmap-xxxhdpi、mipmap-xxhdpi、mipmap-xhdpi、mipmap-hdpi、mipmap-mdpi）
将上述复制的文件夹粘贴到 {rootFolder}/android/app/src/main/res/ 中，并替换现有文件夹
从 AndroidManifest.xml 文件中删除此行：
(android:roundIcon="@mipmap/ic_launcher_round")

图标已成功添加。

修改 IOS 应用图标的步骤： 前往该网站 https://appicon.co/

上传图片并生成图标，然后下载
解压文件夹
在文件夹内复制 AppIcons/Assets.xcassets/ 下所有文件夹（仅包括 AppIcon.appiconset 文件夹）
将 AppIcon.appiconset 文件夹粘贴到 {rootFolder}/ios/{projectname}/Images.xcassets/ 中，并替换现有文件夹

图标已成功添加。

- Faiz Khan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rockvic · Accepted Answer

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-*/中。
- 在mipmap-hdpi中放置72*72像素的ic_launcher.png。
- 在mipmap-mdpi中放置48*48像素的ic_launcher.png。
- 在mipmap-xhdpi中放置96*96像素的ic_launcher.png。
- 在mipmap-xxhdpi中放置144*144像素的ic_launcher.png。
- 在mipmap-xxxhdpi中放置192*192像素的ic_launcher.png。

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"并保存。

否则将会出现构建错误。