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

我正在制作一个React Native应用程序。 我想自定义应用程序图标（意思是你点击图标来启动应用程序）。 我已经Google了这个，但我不断find不同types的图标，指的是不同的东西。 如何将这些types的图标添加到应用程序？

Answer 1

iOS图标

• 在Images.xcassets设置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放到文件夹[PrjDir]/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一个单一的命令行 。

它会生成您的资产，并将其正确添加到您的ios和android项目中。

安装它

你需要安装node 6和image-magick 。

然后安装发生器

 npm install -g yo generator-rn-toolbox 

用它

在某处准备好一个图标文件。 200x200px就足够了。

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

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

你会被要求提供你的react-native项目的名字。 例如，如果您使用react-native init MyAwesomeProject创build项目，则您的项目名称为MyAwesomeProject 。

当你被问到， ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json? ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json? ，回复Y.

而…就是这样！

希望它可以对别人有用:)

Answer 3

我会使用服务来正确缩放图标。 http://makeappicon.com/看起来不错。; 在较大的尺寸上使用图像，因为放大较小的图像会导致较大的图标被像素化。 该网站将为您的iOS和Android的大小。

从那里它只是像设置一个常规的本地应用程序设置图标的问题。

https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/AddingLaunchImagestoanAssetCatalog.html

设置android应用程序的图标

Answer 4

我能够通过遵循这个家伙的build议并使用Android Asset Studio ，将应用程序图标添加到我的react-native android项目中

这是转录的情况下链接死了：

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

1）将您的图片上传到Android Asset Studio 。 select你想要应用的任何效果。 该工具为您生成一个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/react-native-icon

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

我用过了 做了一个512×512 PNG，然后运行该工具和繁荣，完成。 超级简单。

Answer 6

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

https://resizeappicon.com/

希望能帮助到你。

Answer 7

在这里迟一点，但Android Studio有一个非常方便的图标资产向导。 它非常自我解释，但有一些方便的作用，并build立在：