@nativescript-use/change-icon

程序化更改应用程序图标。

安装

npm install @nativescript-use/change-icon

配置

Android

开始之前，我们必须在 App_Resources/Android/src/main/res 中定义我们的图标，我们推荐使用 https://icon.kitchen/ 生成应用程序的图标。本文档将为示例创建 3 个图标

• 默认图标。
• 暗色图标。
• 咖啡馆图标。

1. 生成图标并将它们添加到 App_Resources/Android/src/main/res/mipmap。

• ic_launcher_foreground_[default|dark|cafe].png (图标)
• ic_launcher_background__[default|dark|cafe].png (图标背景)

1. 将 adaptive-icon 添加到 App_Resources/Android/src/main/res/ 内部的 mipmap-anydpi-v26 文件夹。

• mipmap-anydpi-v26/ic_launcher_default.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@mipmap/ic_launcher_background_default"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground_default"/>
</adaptive-icon>

• mipmap-anydpi-v26/ic_launcher_dark.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@mipmap/ic_launcher_background_dark"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground_dark"/>
</adaptive-icon>

• mipmap-anydpi-v26/ic_launcher_cafe.xml

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@mipmap/ic_launcher_background_cafe"/>
    <foreground android:drawable="@mipmap/ic_launcher_foreground_cafe"/>
</adaptive-icon>

3. 将 activity-alias 添加到我们的 AndroidManifest.xml。要在 Android 中更改图标，我们需要在 AndroidManifest.xml 中指定一个 activity-alias，一个用于默认图标，所以在这个例子中，我们的清单文件中将有 3 个 activity-alias

 <application
        android:name="com.tns.NativeScriptApplication"
        android:allowBackup="true"
        android:hardwareAccelerated="true"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher_default"
        android:roundIcon="@mipmap/ic_launcher_default"
        android:theme="@style/AppTheme">

        <activity
            android:name="com.tns.NativeScriptActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
            android:exported="true"
            android:hardwareAccelerated="true"
            android:label="@string/title_activity_kimera"
            android:launchMode="singleTask"
            android:theme="@style/AppTheme">
            
            <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
            <intent-filter>
                <!-- Note that here we have removed <category android:name="android.intent.category.LAUNCHER" /> -->
                <action android:name="android.intent.action.MAIN" />
            </intent-filter>
        </activity>

        <activity-alias
            android:name=".MainActivityDefault"
            android:enabled="true"
            android:exported="true"
            android:icon="@mipmap/ic_launcher_default"
            android:label="@string/title_activity_kimera"
            android:targetActivity="com.tns.NativeScriptActivity">
            <meta-data
                android:name="SET_THEME_ON_LAUNCH"
                android:resource="@style/AppTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity-alias>
        <activity-alias
            android:name=".MainActivityDark"
            android:enabled="false"
            android:exported="true"
            android:icon="@mipmap/ic_launcher_dark"
            android:label="@string/title_activity_kimera"
            android:targetActivity="com.tns.NativeScriptActivity">
            <meta-data
                android:name="SET_THEME_ON_LAUNCH"
                android:resource="@style/AppTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity-alias>
         <activity-alias
            android:name=".MainActivityCafe"
            android:enabled="false"
            android:exported="true"
            android:icon="@mipmap/ic_launcher_cafe"
            android:label="@string/title_activity_kimera"
            android:targetActivity="com.tns.NativeScriptActivity">
            <meta-data
                android:name="SET_THEME_ON_LAUNCH"
                android:resource="@style/AppTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity-alias>
        <activity android:name="com.tns.ErrorReportActivity" />
    </application>

注意以下前一段代码中的重要事项

• 从主活动 activity 中移除了 <category android:name="android.intent.category.LAUNCHER" />。
• 我们有 3 个 activity-alias，分别针对默认、暗色和咖啡馆。
• activity-alias 的 MainActivityDefault 活动别名默认具有 android:enabled="true"。
• 所有其他 activity-aliases 都具有 android:enabled="false"
• activity-alias 标签的 android:name 必须始终具有以下格式 .MainActivity[我们将要使用的更改名称]，在这种情况下： MainActivityDefault、MainActivityDark、MainActivityCafe。
• android:icon 和 android:roundIcon 包含我们之前添加的图标。
• android:targetActivity 的值为主活动，对于 NativeScript 默认为： com.tns.NativeScriptActivity。

iOS

开始之前，我们必须在 App_Resources/iOS 中定义我们的图标，我们推荐使用 https://icon.kitchen/ 生成应用程序的图标。本文档将为示例创建 3 个图标

• 默认图标。
• 暗色图标。
• 咖啡馆图标。

1. 在 App_Resources/iOS/Assets.xcassets/AppIcon.appiconset 文件夹中具有默认图标
2. 生成图标并将它们添加到 App_Resources/iOS。

• [Dark|Cafe]@x2.png (120x120 尺寸)
• [Dark|Cafe]@x3.png (180x180 尺寸)

3. 在 Info.plist (App_Resources/iOS/Info.plist) 中添加以下代码以指示默认图标和替代图标

<key>CFBundleIcons</key>
<dict>
    <key>CFBundlePrimaryIcon</key>
    <dict>
        <key>CFBundleIconFiles</key>
        <array>
            <string>Default</string>
        </array>
        <key>UIPrerenderedIcon</key>
        <false/>
    </dict>
    <key>CFBundleAlternateIcons</key>
    <dict>
        <key>Dark</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>Dark</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
        </dict>
        <key>Cafe</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>Cafe</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
        </dict>
    </dict>
</dict>

用法

您只需导入库并使用可用的方法

• getCurrent()
• reset()
• change("IconName")

import { changeIcon } from "@nativescript-use/change-icon"

function changeIconToDark(){
    changeIcon.change("Dark");
}

function changeIconToCafe(){
    changeIcon.change("Cafe");
}

function changeIconToDefault(){
    changeIcon.reset();
}

function getCurrentIcon(){
    return changeIcon.getCurrent(); // "Default" | "Dark" | "Cafe"
}

许可

Apache 许可版 2.0