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


当前回答

我遵循了他的建议并使用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文件。

其他回答

你可以导入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'
    />
 );
}

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

Take a high resolution image of your logo and place it inside your project directory. Preferably in [Project-DIR]/android/app/src/main/res/ Open Android Studio and run your React-native project. In Android Studio's Project window, select the Android view Right-click the res folder and select New > Image Asset A "Configure Image Asset" window will open; Locate your high resolution image and place set it as your "Foreground layer". Set your "Background Layer" if applicable Click "Next" and continue to finish. Run your application again to see the new app launch icon.

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

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

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

IOS设置

点击Xcode ==>中的项目

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

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

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

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

你的IOS图标设置完成了。

转向Android

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

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

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

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

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

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

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