React Native如何实时动态修改应用名称与图标？

可行，但Android和iOS平台的实现方式差异较大，以下是具体步骤：

Android平台（支持图标和名称动态切换） #

Android通过activity-alias机制实现图标和名称的动态切换，步骤如下：

1. 准备多套资源

   • 在android/app/src/main/res目录下，创建多组图标资源文件夹（如mipmap-icon1、mipmap-icon2），放入对应尺寸的图标文件。
   • 在res下创建多组字符串资源文件夹（如values-icon1、values-icon2），每个文件夹内的strings.xml定义对应应用名称：

     <!-- values-icon1/strings.xml -->
     <resources>
         <string name="app_name">应用名称1</string>
     </resources>
     

2. 配置AndroidManifest.xml

   • 主Activity保留基础配置，移除默认的intent-filter（移到activity-alias中）：

     <activity
         android:name=".MainActivity"
         android:enabled="true"
         android:exported="true"
         android:label="@string/app_name"
         android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize">
     </activity>
     

   • 为每个备用图标创建activity-alias，默认设置android:enabled="false"，并指定对应的图标和名称：

     <!-- 备用图标1 -->
     <activity-alias
         android:name=".Icon1Alias"
         android:enabled="false"
         android:exported="true"
         android:icon="@mipmap/ic_launcher_icon1"
         android:label="@string/app_name"
         android:targetActivity=".MainActivity">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
     </activity-alias>
     
     <!-- 备用图标2 -->
     <activity-alias
         android:name=".Icon2Alias"
         android:enabled="false"
         android:exported="true"
         android:icon="@mipmap/ic_launcher_icon2"
         android:label="@string/app_name_icon2"
         android:targetActivity=".MainActivity">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
     </activity-alias>
     

3. 编写原生模块切换图标
   创建React Native原生模块，调用PackageManager启用目标alias并禁用当前启用的组件：

   // 示例Android原生模块代码
   public class IconChangerModule extends ReactContextBaseJavaModule {
       private static final String MAIN_ALIAS = "com.yourpackage.Icon1Alias";
       private static final String ALTERNATE_ALIAS = "com.yourpackage.Icon2Alias";
   
       public IconChangerModule(ReactApplicationContext reactContext) {
           super(reactContext);
       }
   
       @Override
       public String getName() {
           return "IconChanger";
       }
   
       @ReactMethod
       public void switchToIcon1() {
           toggleAlias(MAIN_ALIAS, ALTERNATE_ALIAS);
       }
   
       @ReactMethod
       public void switchToIcon2() {
           toggleAlias(ALTERNATE_ALIAS, MAIN_ALIAS);
       }
   
       private void toggleAlias(String enableAlias, String disableAlias) {
           PackageManager pm = getReactApplicationContext().getPackageManager();
           pm.setComponentEnabledSetting(
               new ComponentName(getReactApplicationContext(), enableAlias),
               PackageManager.COMPONENT_ENABLED_STATE_ENABLED,
               PackageManager.DONT_KILL_APP
           );
           pm.setComponentEnabledSetting(
               new ComponentName(getReactApplicationContext(), disableAlias),
               PackageManager.COMPONENT_ENABLED_STATE_DISABLED,
               PackageManager.DONT_KILL_APP
           );
       }
   }
   

   然后在React Native中调用该模块：

   import { NativeModules } from 'react-native';
   const { IconChanger } = NativeModules;
   
   // 切换到图标1
   IconChanger.switchToIcon1();
   

iOS平台（仅支持图标动态切换，名称无法动态修改） #

iOS 10.3及以上支持Alternate App Icons功能，但桌面应用名称无法动态修改（仅能在打包时通过本地化或静态配置设置），图标切换步骤如下：

1. 添加备用图标资源

   • 在Xcode中，将备用图标（需包含所有尺寸）添加到项目中，不勾选"Add to targets"。
   • 在Info.plist中添加CFBundleAlternateIcons配置，指定每个备用图标的名称和资源：

     <key>CFBundleIcons</key>
     <dict>
         <key>CFBundlePrimaryIcon</key>
         <dict>
             <key>CFBundleIconFiles</key>
             <array>
                 <string>AppIcon</string>
             </array>
         </dict>
         <key>CFBundleAlternateIcons</key>
         <dict>
             <key>Icon1</key>
             <dict>
                 <key>CFBundleIconFiles</key>
                 <array>
                     <string>Icon1</string>
                 </array>
                 <key>UIPrerenderedIcon</key>
                 <false/>
             </dict>
             <key>Icon2</key>
             <dict>
                 <key>CFBundleIconFiles</key>
                 <array>
                     <string>Icon2</string>
                 </array>
                 <key>UIPrerenderedIcon</key>
                 <false/>
             </dict>
         </dict>
     </dict>
     

2. 编写原生模块切换图标
   创建React Native原生模块，调用UIApplication的setAlternateIconName方法：

   // 示例iOS原生模块代码
   @objc(IconChangerModule)
   class IconChangerModule: NSObject, RCTBridgeModule {
       static func moduleName() -> String! {
           return "IconChanger"
       }
   
       static func requiresMainQueueSetup() -> Bool {
           return true
       }
   
       @objc func switchToIcon1(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
           guard UIApplication.shared.supportsAlternateIcons else {
               reject("UNSUPPORTED", "设备不支持备用图标", nil)
               return
           }
           do {
               try UIApplication.shared.setAlternateIconName("Icon1")
               resolve(nil)
           } catch let error {
               reject("ERROR", error.localizedDescription, error)
           }
       }
   
       @objc func switchToOriginalIcon(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
           guard UIApplication.shared.supportsAlternateIcons else {
               reject("UNSUPPORTED", "设备不支持备用图标", nil)
               return
           }
           do {
               try UIApplication.shared.setAlternateIconName(nil)
               resolve(nil)
           } catch let error {
               reject("ERROR", error.localizedDescription, error)
           }
       }
   }
   

   在React Native中调用：

   import { NativeModules } from 'react-native';
   const { IconChanger } = NativeModules;
   
   // 切换到备用图标1
   IconChanger.switchToIcon1()
     .then(() => console.log("图标切换成功"))
     .catch(err => console.error(err));
   

关于你尝试的main.json动态参数 #

main.json（或app.json）中的图标和名称属于打包时的静态配置，运行时无法动态修改，因此这种方式无法实现需求，必须通过上述平台原生API完成切换。

内容的提问来源于stack exchange，提问作者Muhammad Aariz