动态更改App启动器图标-DEV365 开发者社区

您曾经使用过Tinder吗？如果是，则可以注意到他们的应用程序图标具有粉红色的基本颜色，但是当用户升级到 Gold会员资格时， iCON ICON更改以反映该订阅级别而无需新的应用程序下载。

今天，我们将探索一个名为react-native-change-icon的酷NPM软件包，该软件包使我们能够毫不费力地更换应用程序图标。令人兴奋，对吗？让我们深入研究，看看我们如何使用它！

ð·安装

要开始，让我们打开您的CLI并转到您的项目目录。一旦您在那里，请继续运行此命令：

npm i react-native-change-icon

或

yarn add react-native-change-icon

ðüstroid
实施

既然您拥有应用程序图标，那么让您的项目的Android 目录，然后使用android ->app -> src -> main -> res -> mipmap-*目录，然后添加您需要的所有图标。<<<<<<<<<<< /p>

当您完成添加图标时，请查看文件夹；它应该看起来像这样。

要更新您的AndroidManifest.xml文件，只需为您的每个应用程序图标添加一个活动 - alias！

<activity-alias
     android:name="com.rndynamicicon.MainActivitylogo_1"
     android:enabled="false"
     android:exported="true"
     android:icon="@mipmap/logo_1"
     android:targetActivity=".MainActivity">
     <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
</activity-alias>

您的软件包名称和MainAttivity名称将随后在本节中的应用图标名称。完成后，您的AndroidManifest.xml文件将与此相似。

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

 <uses-permission android:name="android.permission.INTERNET" />

 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/logored"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity" />
     <activity-alias
         android:name="com.rndynamicicon.MainActivitylogo_1"
         android:enabled="false"
         android:exported="true"
         android:icon="@mipmap/logo_1"
         android:targetActivity=".MainActivity">
         <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
    </activity-alias>
    <activity-alias
       android:name="com.rndynamicicon.MainActivitylogo_2"
       android:enabled="false"
       android:exported="true"
       android:icon="@mipmap/logo_2"
       android:targetActivity=".MainActivity">
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
    </activity-alias>
 </application>
</manifest>

您可以通过简单地添加更多标签来创建更多替代图标的灵活性。

注意：

如果您在应用程序中使用任何深层链接，请将它们放入所有活动别名中。
最初只能启用一个活动别名，否则，它将在应用程序启动时间创建多个启动器图标。
应启用我们要在应用程序启动的第一次显示的默认活动别名。
如果您想要每个启动器图标的名称，则还可以更改每个活动中的标签名称。

iOS
实现

首先，转到ios/文件夹，做pod install。
在Xcode中打开您的应用程序，然后将AppIcons组添加到您的应用程序。

将所有图像添加为image@2x.png和image@3x.png。

打开Info.plist文件。
将Icon files (iOS 5)添加到信息属性列表中。

将CFBundleAlternateIcons添加为图标文件（ios 5）的字典，因为它用于替代图标。

在CFBundleAlternateIcons下添加词典在AppIcons组中名为您的图标名称。

对于每个字典，这两个属性UIPrerenderedIcon和CFBundleIconFiles需要配置。

将UIPrerenderedIcon的类型设置为String及其值为NO。
将CFBundleIconFiles的type设置为and set its first key，项目0 to字符串，带有图标名称的值。

在Primary Icon和Newsstand Icon中设置默认图标名称 - > Icon files-> Item 0。

ð�ð» js side

在这些步骤之后，我们可以在应用程序的JS代码中更改图标。让我们导入库：

import { changeIcon, getIcon } from 'react-native-change-icon';

changeIcon('iconname');        // pass the icon name to change the icon 

getIcon();                     // to get the currently active icon

好吧，就是这样。 ð运行代码以在Action中查看它。

输出

请在GitHub上查看demo project以获取更多信息

我希望本文今天为您带来一些新知识。如果您发现它令人愉快且乐于助人，请不要犹豫，给我一些反应！ ð

快乐编码：）