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

How to add icons to React Native app

我正在制作一个 React Native 应用程序。我想自定义应用程序图标（即您单击以启动应用程序的图标）。我已经用谷歌搜索了这个，但我一直在寻找不同类型的图标来指代不同的事物。如何将这些类型的图标添加到应用程序？

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

从那里开始，只需像设置常规本机应用程序一样设置图标即可。

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

Set icon for Android application

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-*/。
    • 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.

2019 年更新Android

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

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

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

否则构建会抛出错误。

通过关注 this guy's advice and using Android Asset Studio

，我能够将应用程序图标添加到我的 react-native android 项目中

在这里，转录以防 link 死掉：

如何在 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 个文件。

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

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

我编写了一个生成器来自动生成图标，用于从单个图标文件中为您的 React 本机应用程序生成图标。它会生成您的资产，并将它们正确添加到您的 ios 和 android 项目中：

更新 (04/09/2019)

我们改进了我们的生成器以符合生态系统标准。您现在可以使用 @bam.tech/react-native-make。

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

使用react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

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

建议：

这里有 一些改进 比以前的工具：

  • 没有 Yeoman 依赖，它现在是一个 react-native-cli 插件
  • 无 Image Magick 依赖性
  • 为 Android
    • 创建自适应图标
  • 为 iOS
    • 添加缺少的图标大小

iOS 和 Android 需要不同大小的图标，如 Rockvic 所说。此外，如果有人感兴趣，我推荐这个网站来生成不同大小的图标。您不需要下载任何东西，它可以完美运行。

https://resizeappicon.com/

希望对您有所帮助。

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

This simple tool allows you to create a single icon in your react-native project, then create icons of all required sizes from it. It currently works for iOS and Android.

我用过。制作了一个 512x512 png，然后 运行 那个工具和繁荣，完成了。超级简单。

我想建议使用 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 并在您的 react native 应用程序中使用 font-awesome 图标

安装

npm install --save react-native-elements

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

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

像这样使用

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

如果您使用的是 expo，只需在您的项目中放置一个 1024 x 1024 的 png 文件，然后 添加一个图标 属性 到您的 app.json 即 "icon": "./src/assets/icon.png"

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

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

我个人使用这个link来生成我想要的图标https://appicon.co/

并用于在应用程序中导入。

For IOS Setup

从 Xcode 单击您的项目 ==>

然后在左侧您会看到您点击它 ==>

现在您将看到子文件名 Images.xcassets 单击它 ==>

你的图标大小会显示在右手边window ==>

只需拖放我们从 https://appicon.co/ ==>

生成的图标

您的 IOS 图标设置已完成。

Moving to Android

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

在这里你将各种文件夹命名为 mipmap-hdpi 直到 xxxhdpi ==>

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

要在React Native上导入图标，如果你想要图标而不需要图片，那么react-native-vector-icons是最好的。如果你不想下载图标并在你的项目中使用它，你可以使用它。

用于在 React-Native[=] 中为 Android 设备 设置 应用程序启动图标 28=] 项目：

  • 为您的徽标拍一张高分辨率图片，并将其放在您的项目目录中。最好在 [Project-DIR]/android/app/src/main/res/
  • 打开 Android Studio 和 运行 你的 React-native 项目。
  • 在 Android 工作室的项目 window、select Android view
  • 右键单击 res 文件夹，然后 select 新建 > 图像资源
  • “配置图像资产”window 将打开；找到您的高分辨率图像并将其设置为您的“前景层”。
  • 设置“背景层”（如果适用）
  • 点击“下一步”继续完成。
  • 运行 再次查看您的应用程序以查看新的应用程序启动图标。

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

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

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