安装

Question

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

Answer 1

iOS图标

在AppIcon。{/ li>中设置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。{/ li>
- 96 {96 ic_launcher.png mipmap-xhdpi。{/ li>
- 144 {144 ic_launcher.png mipmap-xxhdpi。
- 192 {192 ic_launcher.png mipmap-xxxhdpi。

更新2019 Android

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

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

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

其他构建会引发错误。

Answer 2

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

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

安装

您需要安装node 6并image-magick。

然后使用

安装generator

npm install -g yo generator-rn-toolbox

使用

准备一个图标文件。图标大小必须为1024x1024。

然后在您的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创建项目，则项目名称为MyAwesomeProject。

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

而且......就是这样！

希望它对其他人有用：）

Answer 3

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

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

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

Set icon for Android application

Answer 4

我可以通过关注this guy's advice并使用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 Studio有一个非常方便的图标资产向导。它非常自我解释，但有一些方便的效果，它内置于：

Answer 7

像Rockvic所说，你需要为iOS和Android提供不同大小的图标。此外，如果有兴趣的话，我建议这个网站生成不同大小的图标。你不需要下载任何东西，它可以很好地工作。

https://resizeappicon.com/

希望它有所帮助。

Answer 8

如果您使用的是Expo，只需将1024 x 1024 png png文件放入您的项目中，然后将图标属性添加到您的app.json中，即“ icon”：“ ./src/assets/icon.png”

https://docs.expo.io/versions/latest/guides/app-icons

Answer 9

这对正在努力寻找更好的网站来生成图标和启动画面的人们很有帮助

Make App Icon（适用于android和ios）
APE tools（适用于android和ios）
Icon set creator（仅适用于ios）
Andoid Asset Studio（仅适用于android +推荐*）

Answer 10

我建议使用react-native-vector-icons将图标导入项目。当您使用矢量图标时，您无需担心图标缩放方面。使用该软件包时，您可以使用所有流行的图标集，如fontawesome，ionicons等。

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

以下是设置自定义图标的详细步骤

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

Answer 11

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

安装

npm install --save react-native-elements

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

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

使用方式

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

Answer 12

我个人使用此链接生成我想要的图标 https://appicon.co/

用于在应用程序内部导入。

<块引用>

IOS 设置

从 Xcode 点击你的项目 ==>

然后在左侧你会看到你点击那个 ==>

现在你会看到子文件名 Images.xcassets 点击那个 ==>

您的图标大小将显示在右侧窗口中 ==>

只需拖放我们从 https://appicon.co/ ==> 生成的图标

您的 IOS 图标设置已完成。

<块引用>

转向安卓

我们将转到Android ==> app ==> src ==> main ==> res

在这里你会出现各种名为 mipmap-hdpi 的文件夹，直到 xxxhdpi ==>

将图标从特定文件夹拖到项目特定文件夹中。快乐编码！

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

12 个答案:

iOS图标

Android图标

更新2019 Android

安装

使用