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

我正在做一个React Native应用程序。我想自定义应用程序图标(意味着你点击启动应用程序的图标)。我在谷歌上搜索过，但我一直在寻找不同类型的图标，它们指的是不同的东西。如何将这些类型的图标添加到应用程序中?

208600 次浏览
小开

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

从那里，它只是一个设置图标的问题，就像你会一个普通的本地应用程序。

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

为Android应用程序设置图标

小开
最佳答案

iOS图标

  • 在Images.xcassets中设置AppIcon。
    • 添加9个不同大小的图标:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3。
      • 李< / ul > < / >

    Images.xcassets看起来像这样:

    ></a></p> <h2>Android图标</h2> <ul> 将<code>ic_launcher.png</code>放入文件夹<code>[ProjectDirectory]/android/app/src/main/res/mipmap-*/</code>中。 <ul> <li>72*72 <code>ic_launcher.png</code>在<code>mipmap-hdpi</code>。</li> <li>48*48 <code>ic_launcher.png</code>在<code>mipmap-mdpi</code>。</li> <li>96*96 <code>ic_launcher.png</code>在<code>mipmap-xhdpi</code>。</li> <li>144*144 <code>ic_launcher.png</code>在<code>mipmap-xxhdpi</code>。</li> <li>192*192 <code>ic_launcher.png</code>在<code>mipmap-xxxhdpi</code>中。</li> 李< / ul > < / > </ul> <h2>2019年更新</h2> <p>react native的最新版本也支持圆形图标。对于这种特殊情况，您有两个选择:</p> <p>< >强。添加圆形图标:</strong> 在每个mipmap文件夹中，在<code>ic_launcher.png</code>文件中额外添加一个相同大小的圆形版本，称为<code>ic_launcher_round.png</code> <p><强> B。删除圆形图标:</strong> 在<code>yourProjectFolder/android/app/src/main/AndroidManifest.xml</code>中删除行__abc1并保存它 <p>否则构建将抛出错误。</p></div> </div> </div> </div> </div> <div class=

    小开

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

    以下是为防止链接失效而转录的内容:

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

    1)上传你的图片到Android Asset Studio。 选择任何你想应用的效果。该工具为您生成一个zip文件。

    .单击“Download . zip”

    2)在你的机器上解压缩文件。然后将你想要的图像拖到你的/android/app/src/main/res/文件夹中。确保将每个图像放在正确的子文件夹mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.中

    android/app/src/main/res .

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

小开

Android Studio有一个非常方便的图标资产向导，称为Image asset Studio (此处为使用指南)。它是不言自明的，有一些方便的效果，它是内置的:

enter image description here

Windows 10上Android Studio 4.1.3的截图 enter image description here < / p >
小开

我从一个图标文件中为react原生应用程序编写了自动生成图标生成器。它生成你的资产，并将它们正确地添加到你的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>

和…就是这样!希望对其他人有用:)

建议:

下面是上一个工具的一些改进:🥳

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

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

https://resizeappicon.com/

希望能有所帮助。

小开

有人为这个任务做了一个非常容易使用的工具:https://www.npmjs.com/package/app-icon

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

我用过。制作一个512x512的png文件，然后运行该工具，完成。超级简单。

小开

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

除了这些图标集，你也可以把你自己的图标打包为一个ttf文件，你可以直接导入到android和ios项目react-native项目。您可以使用相同的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 * 1024的png文件 在app.json中添加一个图标属性。“图标”:“。/ src /资产/程序”< / p >

< a href = " https://docs.expo。Io /versions/latest/guides/app-icons" rel="nofollow noreferrer">https://docs.expo.io/versions/latest/guides/app-icons .

小开

这有助于人们努力寻找更好的网站来生成图标和飞溅屏幕

小开

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

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

IOS设置

从Xcode中点击你的项目==>

然后在左边你会看到点击==>

现在您将看到子文件名Images。Xcassets点击==>

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

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

你的IOS图标设置完成了。

转向Android

Android ==>应用= =比;src = =比;主要= =比;res

这里有命名为mimmap -hdpi的各种文件夹，直到xxxhdpi ==>

将图标从特定文件夹拖到项目特定文件夹。 编码快乐!< / p >
小开

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

小开

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

  • 取logo的高分辨率图像，并将其放置在项目目录中。最好是在[Project-DIR]/android/app/src/main/res/
  • 打开Android Studio并运行React-native项目。
  • 在Android Studio的项目窗口中，选择安卓系统视图 . exe
  • 右键单击res文件夹并选择New >形象资产
  • A“配置镜像资产”;窗户会打开;找到你的高分辨率图像，并将其设置为你的“前景层”。
  • 设置你的“背景层”如果适用的话
  • 点击“Next"并继续完成。
  • 再次运行应用程序，查看新的应用程序启动图标。

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

小开
使用这个库使你的工作更容易。 它将自动生成图标的过程

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

小开

Android应用图标: 去这个网站< a href = " https://appicon。Co /" rel="nofollow noreferrer">https://appicon.co/

  1. 添加图像和生成图标，应该下载

  2. 解压文件夹

  3. 在他们的拷贝AppIcons/android/(即文件夹 名称:mipmap-xxxhdpi mipmap-xxhdpi、mipmap-xhdpi mipmap-hdpi mipmap-mdpi) < / p >

  4. 将上面复制的文件夹粘贴到{rootFolder}/android/app/src/main/res/ 并替换现有的

  5. 从AndroidManifest.xml中删除这一行
    (android: roundIcon =“@mipmap / ic_launcher_round") < / p >

图标添加成功

修改IOS应用图标: 去这个网站< a href = " https://appicon。Co /" rel="nofollow noreferrer">https://appicon.co/

  1. 添加图像和生成图标，应该下载

  2. 解压文件夹

  3. 在他们的拷贝AppIcons/Assets中的所有文件夹。xcassets /(即。 AppIcon。appiconset文件夹)< / p >

  4. 粘贴AppIcon。Appiconset文件夹 {rootFolder} / ios / {projectname} /图像。Xcassets /和替换现有的一个

图标添加成功

小开

更新2022

因为阿尔莫罗的答案已经不复存在了

Android和iOS图标

你现在可以在iOS和Android上用一个命令生成圆形图标:

npx icon-set-creator create ./path/to/icon.png

我强烈建议使用至少1024x1024像素的图标

自适应Android图标

npx icon-set-creator create -b <background> -f <foreground> -A

背景 -颜色(例如"#ffffff")或图像资产(例如" assets/images/christmas-background.png")

前景 -图像资产(例如"assets/images/christmas- prospect .png")


提交答案