如何向React Native应用程序添加图标

Question

我正在制作一个React Native应用程序.我想自定义应用程序图标(表示您单击以启动应用程序的图标).我用Google搜索了这个,但我一直在寻找不同类型的图标来引用不同的东西.如何将这些类型的图标添加到应用程序？

Answer 1

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.

Answer 2

我编写了一个生成器,可以从单个图标文件自动为您的本机应用程序生成图标:https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-icons-in -a-single-command-line.

它会生成您的资产,并且还会将它们正确地添加到您的ios和android项目中.

安装它

你需要yarn add @bam.tech/react-native-make安装和react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>.

然后安装发电机用

__PRE__

用它

在某个地方准备好一个图标文件.图标必须为1024x1024.

然后在您的React Native项目中运行:

__PRE__

系统将询问您反应原生项目的名称.例如,如果您使用创建项目yarn add @bam.tech/react-native-make,则项目名称为react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>.

当你被问到时yarn add @bam.tech/react-native-make,用Y回复.

而且......就是这样!

希望它对其他人有用:)

Answer 3

我会使用服务正确缩放图标.http://makeappicon.com/似乎很好.使用较大尺寸的图像,因为放大较小的图像可能会导致较大的图标像素化.该网站将为您提供iOS和Android的尺寸.

从那里只需设置图标就像你常规的原生应用程序一样.

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

设置Android应用程序的图标

Answer 4

通过遵循这个人的建议并使用Android Asset Studio,我能够在我的react-native 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完全删除文件.

Answer 5

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

这个简单的工具允许您在react-native项目中创建一个图标,然后从中创建所有必需大小的图标.它目前适用于iOS和Android.

我用过它.做了一个512x512 png然后运行那个工具和繁荣,完成了.超级容易.

Answer 6

这对于那些努力寻找更好的网站来生成图标和闪屏的人很有帮助

• 制作应用程序图标（适用于 android 和 ios）
• APE工具（适用于android和ios）
• 图标集创建器（仅适用于 ios）
• Andoid Asset Studio（仅适用于 Android + 推荐*）

Answer 7

到这里来有点晚，但是Android Studio有一个非常方便的图标资产向导。它具有很强的自我解释性，但有一些方便的作用，并且内置于：

Answer 8

2022 年更新

由于阿尔莫罗的答案不再维护

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”）

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

Answer 9

步骤 Android 应用程序图标： 转到此网站https://appicon.co/

1. 添加图像并生成图标，应该下载

2. 解压文件夹

3. 在其副本中 AppIcons/android/ 中的所有文件夹（即文件夹名称：mipmap-xxxhdpi、mipmap-xxhdpi、mipmap-xhdpi、mipmap-hdpi、mipmap-mdpi）

4. 将上面复制的文件夹粘贴到 {rootFolder}/android/app/src/main/res/ 并替换现有的文件夹

5. 从 AndroidManifest.xml 中删除此行
   (android:roundIcon="@mipmap/ic_launcher_round")

图标添加成功

更改 IOS 应用程序图标： 转到此网站https://appicon.co/

1. 添加图像并生成图标，应该下载

2. 解压文件夹

3. 在其副本中 AppIcons/Assets.xcassets/ 中的所有文件夹（即 AppIcon.appiconset 文件夹）

4. 将 AppIcon.appiconset 文件夹粘贴到 {rootFolder}/ios/{projectname}/Images.xcassets/ 并替换现有文件夹

图标添加成功

Answer 10

Rockvic说,你需要为iOS和Android提供不同大小的图标.此外,如果有兴趣的话,我建议这个网站生成不同大小的图标.你不需要下载任何东西,它完美无缺.

https://resizeappicon.com/

希望能帮助到你.