@computools/react-native-dynamic-app-icon

中文文档

1.0.1发布于 2025/01/21MITTypeScriptESM + CJS零依赖近 30 天下载 4500

以跨平台支持iOS和Android的方式动态地更改React Introduct中的应用程序图标. 适合主题、事件和个性化.

文档目录12 节

安装
iOS 设置
生成 App 图标
设置 App 图标
机器人
iOS系统
方法
使用量
更改图标
获取图标
捐款
许可证

@computools/ react-native-动态-app-icon ###

以跨平台支持iOS和Android的方式动态地更改React Introduct中的应用程序图标. 适合主题、事件和个性化.

iOS系统	机器人

安装

使用 Yarn

yarn add @computools/react-native-dynamic-app-icon

使用 npm

npm i @computools/react-native-dynamic-app-icon

iOS 设置

安装软件包后, 运行 :

cd ios
pod install

生成 App 图标

使用类似工具生成应用程序图标 appicon.co (英语) 以确保包括所有必要的大小和格式.

设置 App 图标

机器人

步骤1: 添加 App 图标文件

将生成的文件重命名为 ic 发射器 {icon type>.png 譬如说. ic_launcher_orange.png。。。 .
将默认图标文件重命名为 ic_launcher_default.png
将应用程序图标文件移动到 android/app/src/main/res/mipmap-*。。。 .

步骤2:修改 `AndroidManifest.xml`

为每个图标添加活性化名.

<activity-alias
  android:name=".MainActivityPineapple" // .MainActivity + <icon-type>
  android:enabled="false"
  android:exported="true"
  android:icon="@mipmap/ic_launcher_pineapple"
  android:targetActivity=".MainActivity">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity-alias>

重要数字 : android:enabled="true" 应该只针对默认活动别名,其他应该有 android:enabled="false"。。。 .

删除 <category android:name="android.intent.category.LAUNCHER" /> 活动名称 android:enabled="true"。。。 .

注释:

不要忘记使用正确的文件 android:icon 财务报告和审定财务报表 android:name。。。 . android:name 实值 。主要实际性+ 例如,用于 android:icon=ic_launcher_orange android:name=".MainActivityOrange"。。。 .
别忘了换衣服 android:icon 改为 "@mipmap/ic_launcher_default" 内 <application> 标签.
确定您有活动名 android:icon=ic_launcher_default, (中文(简体) ), android:name=".MainActivityDefault"。。。 .

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/ic_launcher_default"
    android:allowBackup="false"
    android:theme="@style/AppTheme"
    android:supportsRtl="true">
    <activity
      android:name=".MainActivity"
      android:label="@string/app_name"
      android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
      android:launchMode="singleTask"
      android:windowSoftInputMode="adjustResize"
      android:exported="true">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
    <activity-alias
      android:name=".MainActivityDefault"
      android:enabled="true"
      android:exported="true"
      android:icon="@mipmap/ic_launcher_default"
      android:targetActivity=".MainActivity">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
      </intent-filter>
    </activity-alias>
    <activity-alias
      android:name=".MainActivityPineapple"
      android:enabled="false"
      android:exported="true"
      android:icon="@mipmap/ic_launcher_pineapple"
      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=".MainActivityStrawberry"
      android:enabled="false"
      android:exported="true"
      android:icon="@mipmap/ic_launcher_strawberry"
      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=".MainActivityOrange"
      android:enabled="false"
      android:exported="true"
      android:icon="@mipmap/ic_launcher_orange"
      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系统

步骤1: 添加 App 图标文件

重命名已生成 AppIcon.appiconset 文件夹到 <icon-type>Icon.appiconset。。。 .
重命名默认 AppIcon.appiconset 改为 DefaultIcon.appiconset。。。 .
将所有.appiconset文件夹移动到 ios/<app-name>/Images.xcassets。。。 .
更新 folder 每个值 Contents.json 文件例如: "folder": "Images.xcassets/PineappleIcon.appiconset/"。。。 .

第2步:在Xcode中设置 App 图标

打开 Xcode;
去应用 General 设置;
滚动至 App Icons and Launch Screen· ;
设定 App Icon 改为 DefaultIcon 检查一下 Include all app icon assets 复选框.

第3步: 修改信息. plist

打开 Xcode, 转到 Info 并插入密钥 CFBundleIcons.
内部 CFBundleIcons 字典添加密钥 CFBundleAlternateIcons。。。 .
内部 CFBundleAlternateIcons 为替代图标添加密钥 :

这个 key 您将从代码中引用的名称 .
设定第一个 array 项到目标.appiconset的名称.

内部 CFBundleIcons 设置默认图标名称 CFBundlePrimaryIcon 财务报告和审定财务报表 UINewsstandIcon - > 图标文件 - > 项目0.

Info.plist 示例:

<key>CFBundleIcons</key>
<dict>
  <key>CFBundleAlternateIcons</key>
  <dict>
    <key>DefaultIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>DefaultIcon</string>
      </array>
      <key>UIPrerenderedIcon</key>
      <false/>
    </dict>
    <key>OrangeIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>OrangeIcon</string>
      </array>
      <key>UIPrerenderedIcon</key>
      <false/>
    </dict>
    <key>PineappleIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>PineappleIcon</string>
      </array>
      <key>UIPrerenderedIcon</key>
      <false/>
    </dict>
    <key>StrawberryIcon</key>
    <dict>
      <key>CFBundleIconFiles</key>
      <array>
        <string>StrawberryIcon</string>
      </array>
      <key>UIPrerenderedIcon</key>
      <false/>
    </dict>
  </dict>
  <key>CFBundlePrimaryIcon</key>
  <dict>
    <key>CFBundleIconFiles</key>
    <array>
      <string>DefaultIcon</string>
    </array>
    <key>CFBundleIconName</key>
    <string></string>
    <key>UIPrerenderedIcon</key>
    <false/>
  </dict>
  <key>UINewsstandIcon</key>
  <dict>
    <key>CFBundleIconFiles</key>
    <array>
      <string>DefaultIcon</string>
    </array>
    <key>UINewsstandBindingEdge</key>
    <string>UINewsstandBindingEdgeLeft</string>
    <key>UINewsstandBindingType</key>
    <string>UINewsstandBindingTypeMagazine</string>
  </dict>
</dict>

方法

方法	说明	参数	回返
变化Icon`<T extends string>`(漫画名:T)	将应用程序的图标更改为指定的图标 . 说明: 软件包在更改了应用程序图标后会自动关闭Android上的应用程序. 实施此行为是为了防止重复图标,不需要用户的额外行动.	图标Name (T):要切换到的图标名称.	`Promise<void>`:以无效决定或以错误拒绝.
获取Icon`<T extends string>`(a) 与《公约》有关的其他事项	获取当前活动应用程序图标的名称 .	无	`Promise<T>`: 以当前已使用的图标的名称决定,或以出错拒绝.

使用量

更改图标

import { changeIcon } from '@computools/react-native-dynamic-app-icon';

const setAppIcon = async () => {
  try {
    await changeIcon('Orange');
  } catch (error) {
    // error handling
  }
}

setAppIcon();

获取图标

import { getIcon } from '@computools/react-native-dynamic-app-icon';

const getCurrentIcon = async () => {
  try {
    const currentIcon = await getIcon();
    // the logic of saving the currentIcon or other
  } catch (error) {
    // error handling
  }
}

getCurrentIcon();

捐款

见贡献指南学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院

制造的创建- 反应- 本土- 图书馆

版本与发布记录

@computools/react-native-dynamic-app-icon 共发布 2 个版本，首次发布于 2025/01/21；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`1.0.1`latest	2025/01/21	1.8 年前
`1.0.0`	2025/01/21	1.8 年前

关于 @computools/react-native-dynamic-app-icon 的常见问题

@computools/react-native-dynamic-app-icon 是什么？

以跨平台支持iOS和Android的方式动态地更改React Introduct中的应用程序图标. 适合主题、事件和个性化.

如何安装 @computools/react-native-dynamic-app-icon？

在项目目录运行 npm install @computools/react-native-dynamic-app-icon，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（*）、react-native（*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@computools/react-native-dynamic-app-icon 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@computools/react-native-dynamic-app-icon 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require() 都可以使用，打包工具会自动选择合适的版本。

@computools/react-native-dynamic-app-icon 可以商用吗？

@computools/react-native-dynamic-app-icon 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@computools/react-native-dynamic-app-icon 的下载量有多少？

根据 npm 官方下载统计，@computools/react-native-dynamic-app-icon 在 2026/10/11 – 2026/11/09 这 30 天内被下载 4,500 次，日均约 150 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@computools/react-native-dynamic-app-icon 还在维护吗？

最新版本 1.0.1 发布于 2025/01/21（1.8 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/01/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @computools/react-native-dynamic-app-icon

pnpmpnpm add @computools/react-native-dynamic-app-icon
yarnyarn add @computools/react-native-dynamic-app-icon
bunbun add @computools/react-native-dynamic-app-icon

peer 依赖react *react-native *

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

4,500

约 4500 次日均 150 次

统计周期 2026/10/11 – 2026/11/09
数据来自 npm 官方下载统计，今天更新

最新版本1.0.1发布于 1.8 年前

开源许可MIT宽松许可

包体积32.2 kB24 个文件 · 解压后

运行依赖0 个另有 2 个 peer 依赖

模块格式ESM + CJS

TypeScript自带类型

发布版本2 个近 12 个月 0 个

首次发布2025/01/211.8 年前

元数据更新2025/01/21

每一个软件包背后，
都有分享与创造的人。

@computools/react-native-dynamic-app-icon

@computools/ react-native-动态-app-icon ###

安装

iOS 设置

生成 App 图标

设置 App 图标

机器人

步骤1: 添加 App 图标文件

步骤2:修改 AndroidManifest.xml

iOS系统

步骤1: 添加 App 图标文件

第2步:在Xcode中设置 App 图标

第3步: 修改信息. plist

方法

使用量

更改图标

获取图标

捐款

许可证

版本与发布记录

关于 @computools/react-native-dynamic-app-icon 的常见问题

@computools/react-native-dynamic-app-icon 是什么？

如何安装 @computools/react-native-dynamic-app-icon？

@computools/react-native-dynamic-app-icon 支持 TypeScript 吗？

@computools/react-native-dynamic-app-icon 支持 ESM 还是 CommonJS？

@computools/react-native-dynamic-app-icon 可以商用吗？

@computools/react-native-dynamic-app-icon 的下载量有多少？

@computools/react-native-dynamic-app-icon 还在维护吗？

步骤2:修改 `AndroidManifest.xml`