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

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

当前回答

如果你使用的是expo，在你的项目中放置一个1024 * 1024的png文件在app.json中添加一个图标属性。“图标”:“。/ src /资产/程序”

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

其他回答

我想建议使用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'
    />
 );
}

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

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

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

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

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

IOS设置

点击Xcode ==>中的项目

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

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

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

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

你的IOS图标设置完成了。

转向Android

我们会用到Android ==> app ==> src ==> main ==> res

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

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

使用这个库可以使您的工作更容易。它将自动化您的图标生成过程

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

推荐文章