# @computools/react-native-dynamic-app-icon 中文文档

规范地址：https://npmcn.com/package/%40computools/react-native-dynamic-app-icon/

版本：1\.0\.1
npm 元数据更新时间：2025-01-21T15:24:04.544Z
中文译文更新时间：2026-11-10T14:55:19.375Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40computools/react-native-dynamic-app-icon
原文对照：https://npmcn.com/package/%40computools/react-native-dynamic-app-icon/?lang=original
项目主页：https://github.com/computools/react-native-dynamic-app-icon#readme
源码仓库：https://github.com/computools/react-native-dynamic-app-icon

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：32.2 kB，24 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*
- 首次发布：2025-01-21T14:41:03.332Z
- 最新版本发布：2025-01-21T15:24:04.279Z
- 近 30 天下载量：4500（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

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

## 安装

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

也可以使用：`pnpm add @computools/react-native-dynamic-app-icon`、`yarn add @computools/react-native-dynamic-app-icon`、`bun add @computools/react-native-dynamic-app-icon`

## README

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

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

| iOS系统 | 机器人 |
| --- | --- |
| ![](https://ik.imagekit.io/Computools/RN%20Dynamic%20App%20Icons%20/ios_dynamic_app_icon_preview.gif?updatedAt=1737115408393) | ![](https://ik.imagekit.io/Computools/RN%20Dynamic%20App%20Icons%20/android_preiew_small.gif?updatedAt=1737465275614) |

## 安装

**使用 Yarn**

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

**使用 npm**

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

### iOS 设置

安装软件包后, 运行 :

```bash
cd ios
pod install
```

## 生成 App 图标

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

![](https://ik.imagekit.io/Computools/RN%20Dynamic%20App%20Icons%20/app_icon_generator.png?updatedAt=1737458948009)

## 设置 App 图标

### 机器人

#### 步骤1: 添加 App 图标文件

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

![](https://ik.imagekit.io/Computools/RN%20Dynamic%20App%20Icons%20/icons_files_android.png?updatedAt=1737456324691)

#### 步骤2:修改 `AndroidManifest.xml`

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

```kotlin
<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"`。 。 。 .

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

**注释:**

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

**`AndroidManifest.xml` 示例:**

```kotlin
<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 图标文件

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

![](https://ik.imagekit.io/Computools/RN%20Dynamic%20App%20Icons%20/icons_files_ios.png?updatedAt=1737456324725)

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

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

![](https://ik.imagekit.io/Computools/RN%20Dynamic%20App%20Icons%20/xcode_general.png?updatedAt=1737456324703)

#### 第3步: 修改信息. plist

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

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

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

![](https://ik.imagekit.io/Computools/RN%20Dynamic%20App%20Icons%20/info_plist.png?updatedAt=1737456324778)  

**`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>`: 以当前已使用的图标的名称决定,或以出错拒绝. |

## 使用量

### 更改图标

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

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

setAppIcon();
```

### 获取图标

```typescript
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();
```

## 捐款

见 [贡献指南](https://npmcn.com/package/%40computools/react-native-dynamic-app-icon/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献.

## 许可证

麻省理工学院

* * *

制造的 [创建- 反应- 本土- 图书馆](https://github.com/callstack/react-native-builder-bob)

## 常见问题

### @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 和提交记录判断。