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

iOS 图标

在 Images.xcassets 中设置 AppIcon。

添加 9 个不同大小的图标：29pt 29pt*2 29pt*3 40pt*2 40pt*3 57pt 57pt*2 60pt*2 60pt*3。

29点

29点*2

29点*3

40点*2

40点*3

57pt

57点*2

60点*2

60点*3。

Images.xcassets 将如下所示：

https://i.stack.imgur.com/qDrcO.png

安卓图标

将 ic_launcher.png 放在文件夹 [ProjectDirectory]/android/app/src/main/res/mipmap-*/ 中。 mipmap-hdpi 中的 72*72 ic_launcher.png。 48*48 ic_launcher.png 在 mipmap-mdpi 中。 mipmap-xhdpi 中的 96*96 ic_launcher.png。 mipmap-xxhdpi 中的 144*144 ic_launcher.png。 mipmap-xxxhdpi 中的 192*192 ic_launcher.png。

mipmap-hdpi 中的 72*72 ic_launcher.png。

48*48 ic_launcher.png 在 mipmap-mdpi 中。

mipmap-xhdpi 中的 96*96 ic_launcher.png。

mipmap-xxhdpi 中的 144*144 ic_launcher.png。

mipmap-xxxhdpi 中的 192*192 ic_launcher.png。

更新 2019 安卓

最新版本的 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。

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

使用它 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

Set icon for Android application

---

通过遵循 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}.

https://i.stack.imgur.com/wgJ5Z.png

3）不要（就像我最初所做的那样）天真地将整个文件夹拖放到您的 res 文件夹上。因为您可能会完全删除您的 /res/values/{strings,styles}.xml 文件。

---

Android Studio 有一个非常方便的图标资产向导，称为 Image Asset Studio (user guide here)。这是非常自我解释的，并且有一些方便的效果，它内置于：

https://i.stack.imgur.com/cNe6f.png

https://i.stack.imgur.com/jzIV0.png

---

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

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

我用过。制作了一个 512x512 png，然后运行该工具并繁荣，完成。超级容易。

---

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

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 项目中为 Android 设备设置应用启动图标：

拍摄您的徽标的高分辨率图像并将其放置在您的项目目录中。最好在 [Project-DIR]/android/app/src/main/res/

打开 Android Studio 并运行您的 React-native 项目。

在 Android Studio 的 Project 窗口中，选择 Android 视图

右键单击 res 文件夹并选择 New > Image Asset

将打开“配置图像资产”窗口；找到您的高分辨率图像并将其设置为“前景层”。

如果适用，设置您的“背景层”

单击“下一步”并继续完成。

再次运行您的应用程序以查看新的应用程序启动图标。

官方文档可以在这里找到：https://developer.android.com/studio/write/image-asset-studio

---

使用此库可让您的工作更轻松。它将自动化您的图标生成过程

https://www.npmjs.com/package/@bam.tech/react-native-make

---

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

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

对于 IOS 设置

从 Xcode 点击你的项目 ==>

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

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

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

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

并且您的 IOS 图标设置已完成。

迁移到安卓

我们会去 Android ==> app ==> src ==> main ==> res

在这里，您将看到各种名为 mipmap-hdpi 的文件夹，直到 xxxhdpi ==>

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

---

如果您想要在没有图片的情况下在 React Native 上导入图标，那么 react-native-vector-icons 将是最好的。如果您不想下载图标并在项目中使用它，则可以使用它。

---

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

除了这些图标集，您还可以通过将图标打包为 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 并将 font-awesome 图标用于您的 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'
    />
 );
}

---