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

Posted 2023-02-16

【中文标题】如何将图标添加到 React Native 应用程序

【英文标题】：How to add icons to React Native app

【发布时间】：2016-03-23 15:12:34

【问题描述】：

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

【问题讨论】：

这是适用于 ios、android 还是两者兼有？

现在适用于 ios，但最终适用于两者

也可以看到这个答案：***.com/a/11845815/5576491

【参考方案1】：

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 in mipmap-hdpi。 48*48 ic_launcher.png in mipmap-mdpi。 96*96 ic_launcher.png in mipmap-xhdpi。 144*144 ic_launcher.png in mipmap-xxhdpi。 192*192 ic_launcher.png in mipmap-xxxhdpi。

更新 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" 行并保存。

否则构建会引发错误。

【讨论】：

@adam-katz，这确实应该是公认的答案。

是否存在直接在 react-native 中为两者制作的任何方式？

只是为了更新这个很棒的答案。现在，iOS 上的 iPadPro 还需要 83.5pt*2。

我写了一个生成器，可以从单个图标文件中为您的 react native 应用程序自动生成图标 :) 希望它可以帮助其他人！ （见this answer）

React Native 文档中的这个在哪里？

【参考方案2】：

我编写了一个生成器来从单个图标文件为您的 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 上 adaptive icons guidelines 后面的图标

以下是对之前工具的一些改进：?

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

【讨论】：

这应该是公认的答案。你为我节省了大量的时间！作为应用程序开发者，我们真的不在乎 iOS 和 Android 需要多少个图标，因为 9 个图标和 4 个图标都有相同的内容，谁在乎呢？视网膜还是非视网膜，大屏幕还是小屏幕，谁在乎？只要给我完全清晰和相同的图标，就是这样！谢谢你，我想试试你的其他工具。 :)

我发现了问题：安装image-magick时，一定要安装旧版工具，这样convert命令才会存在。

@RickLove 在使用yarn -g add imagemagick 安装 imagemagick 后，我也遇到了这个问题。然后我使用homebrew 安装它，而不是（brew install imagemagick），它安装了所有必要的东西并正常工作。

@PolaEdward 不需要 Ruby :) 所有要求都在这里：github.com/bamlab/generator-rn-toolbox/blob/master/generators/…

它有很大帮助，但无论如何也可以添加圆形图标吗？这些库只是为 android 添加了普通图标。再次感谢您

【参考方案3】：

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

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

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

Set icon for Android application

【讨论】：

Apple 链接已损坏，@rmevans9。 :(

请注意，此服务会收集有关您的信息 - 例如应用名称、应用的市场类别等 - 并阻止图片下载，除非提供电子邮件地址。

我已经阅读了这个答案，只是过了一段时间才阅读下面的 Almouro 的答案。我希望我从 Almouro 的回答开始。

【参考方案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 文件。

【参考方案5】：

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

Windows 10 上 Android Studio 4.1.3 的屏幕截图

【讨论】：

您是否在 Android Studio 中构建您的 rect-native 项目？

不，但我经常因为某种原因不得不打开它。与 XCode 相同——最终你需要跨越到另一边。这是我用来在几秒钟内生成高质量图标集的方法，非常惊讶它有如此强烈的反应。地狱 - 我什至拥有自己的开源项目来为移动应用程序生成图标，我仍然更喜欢这种方法。 npmjs.com/package/cordova-media-generator

这太棒了 - 它还美化了图标，我发现这非常有用（比如这个答案！）。

太棒了！不错！

我在 MacOS 上安装了 Android Studio 4.1，但我没有看到右键单击该文件夹打开图像资产的选项，也没有看到其他文件夹。

【参考方案6】：

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

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

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

【讨论】：

PS：react-native-icon 被标记为弃用，已重命名为 app-icon； npmjs.com/package/app-icon

我在安装 Almouro 的回答中提到的 react-native-make 时遇到了麻烦。然后我发现这个app-icon可以正确安装，而且很简单，效果很好。

【参考方案7】：

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

https://resizeappicon.com/

希望对你有帮助。

【参考方案8】：

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

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

【参考方案9】：

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

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

【参考方案10】：

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

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

对于 IOS 设置

在 Xcode 中点击您的项目 ==>

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

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

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

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

您的 IOS 图标设置已完成。

转向安卓

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

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

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

【参考方案11】：

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

【参考方案12】：

用于在 React-Native 项目中为 Android 设备 设置 应用启动图标：

获取徽标的高分辨率图像并将其放在项目目录中。最好在 [Project-DIR]/android/app/src/main/res/ 打开 Android Studio 并运行您的 React-native 项目。 在 Android Studio 的 Project 窗口中，选择 Android view 右键单击 res 文件夹并选择新建 > 图像资源 “配置图像资源”窗口将打开；找到您的高分辨率图像并将其设置为“前景图层”。 如果适用，请设置“背景层” 点击“下一步”继续完成。 再次运行您的应用程序以查看新的应用程序启动图标。

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

【参考方案13】：

我想建议使用 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

【参考方案14】：

您可以导入 react-native-elements 并将字体真棒图标用于您的 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'
    />
 );

【讨论】：

我们如何为Android添加图标，因为我们将名称指定为ios-american-football？或者我们可以用这种语法用android替换ios？

这没有解决原来的问题。

这篇文章是关于启动器图标的，与 react-native-elements 无关。该库仅用于应用内图标。