在React Native中，如何“动态”更改Android应用程序图标？

Question

我在互联网上查找，发现一些像这样的包不支持 React Native Android，而且这个包没有很好的文档记录......

React Native Android 是否还有其他模块可以实现这一点？或者有什么方法可以对应用程序进行编程来动态更改图标。

例如，当系统为深色主题时，图标会更改为深色主题。或者就像日历图标更改一样，在图标上显示当前日期。或者时钟显示指针随着时间的推移而移动，等等。

Answer 1

在 Android 上启用动态图标更改只需几个步骤。看起来工作量很大，但实际上很简单。

1. 将所有图标放在mipmap文件夹中。

2.AndroidManifest.xml（为每个图标创建活动别名）

在 下<application>，Main<activity>不应包含intent-filter&android:exported应设置为true。这将MainActivity始终可用，而不显示快捷方式图标。

<activity
    android:name=".MainActivity"
    android:label="Test App"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"
    android:exported="true"
>
</activity>

3. 现在，对于要显示的每个图标，创建<activity-alias>. 设置android:enabled为true默认图标。所有启用的图标将显示在桌面上。因此，请确保仅启用一个活动别名。

<activity-alias
    android:label="Test App :: Default"
    android:icon="@mipmap/icon1"
    android:name="First"
    android:enabled="true"
    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:label="Test App :: Special"
android:icon="@mipmap/icon2"
android:name="Second"
android:enabled="false"
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:label="Test App :: Very Special"
    android:icon="@mipmap/icon3"
    android:name="Third"
    android:enabled="false"
    android:targetActivity=".MainActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity-alias>

4. 创建 Java 类

为每个活动别名创建空类。

package com.your.package;

class First {
}

5.创建IconChanger类

@ReactMethod允许从react-native访问它。您可以更改com.your.package为BuildConfig.APPLICATION_ID以避免多次写入包名称。

package your.package.name;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;
import android.content.pm.PackageManager;
import android.content.ComponentName;
import com.facebook.react.bridge.Promise;
import android.os.Bundle;  
import android.widget.Toast; 

public class IconChanger extends ReactContextBaseJavaModule {

    private final ReactApplicationContext reactContext;

    public IconChanger(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "IconChanger";
    }

    @ReactMethod
    public void changeIcon(String enableIntent, String disableIntent, Promise response) {
        try {
            PackageManager packageManager = this.reactContext.getPackageManager();
            int action;
            String activeIntent="com.your.package."+enableIntent;

            Toast.makeText( this.reactContext,"Enabling "+enableIntent,Toast.LENGTH_SHORT).show();

            packageManager.setComponentEnabledSetting(
                new ComponentName("com.your.package", activeIntent), 
                PackageManager.COMPONENT_ENABLED_STATE_ENABLED,
                PackageManager.DONT_KILL_APP
            );

            if(!disableIntent.equals(null) && !disableIntent.equals(enableIntent)){
                activeIntent="com.your.package.."+disableIntent;
                Toast.makeText( this.reactContext,"Disabling "+disableIntent,Toast.LENGTH_SHORT).show();

                packageManager.setComponentEnabledSetting(
                    new ComponentName("com.your.package.", activeIntent), 
                    PackageManager.COMPONENT_ENABLED_STATE_DISABLED,
                    PackageManager.DONT_KILL_APP
                );
            }
            response.resolve(enableIntent);
        } catch (Exception e) {
            response.reject("Error", e);
        }
    }
}

6.将其注册为NativeModule

创造CustomPackages.java

package com.your.package;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class CustomPackages implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new IconChanger(reactContext));

        return modules;
    }
}

7. 现在将此包添加到您的MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new CustomPackages());
    return packages;
}

8. 访问IconChanger自react-native

import { NativeModules } from 'react-native';
const { IconChanger } = NativeModules;
IconChanger.changeIcon(newIcon, oldIcon);

[笔记]

• 这将启用新活动，然后关闭旧活动。

• 在应用程序关闭时或在后台更改图标，因为更改活动会关闭应用程序。