react-native图标替换

在开发移动应用时，应用图标是用户对应用的第一印象。这篇文章将详细说明如何为 React Native 应用更换图标，包括 Android 和 iOS 平台的操作步骤。

准备工作

图标文件要求

Android 图标尺寸

Android 需要为不同屏幕密度准备多个尺寸的图标：

密度	文件夹	尺寸
MDPI	mipmap-mdpi	48x48 px
HDPI	mipmap-hdpi	72x72 px
XHDPI	mipmap-xhdpi	96x96 px
XXHDPI	mipmap-xxhdpi	144x144 px
XXXHDPI	mipmap-xxxhdpi	192x192 px

iOS 图标尺寸

iOS 需要多个尺寸的图标以适配不同设备：

用途	尺寸	文件名
iPhone 通知	20x20 @2x	40.png
iPhone 通知	20x20 @3x	60.png
iPhone 设置	29x29 @1x	29.png
iPhone 设置	29x29 @2x	58.png
iPhone 设置	29x29 @3x	87.png
iPhone Spotlight	40x40 @2x	80.png
iPhone Spotlight	40x40 @3x	120.png
iPhone 应用	60x60 @2x	120.png
iPhone 应用	60x60 @3x	180.png
App Store	1024x1024 @1x	1024.png

图标设计建议

1. 使用矢量图形：从矢量源文件（如 SVG、AI）导出，确保清晰度。

2. 简洁设计：图标应该简单明了，在小尺寸下也能识别。

3. 避免文字：尽量不要在图标中使用文字。

4. 测试不同背景：确保图标在浅色和深色背景下都清晰可见。

5. 遵循平台规范：

   • Android: Material Design 图标指南
   • iOS: Human Interface Guidelines

Android 图标替换

步骤 1：准备图标文件

将准备好的图标文件组织成以下结构：

AppIcons/android/
├── mipmap-mdpi/
│   └── ic_launcher.png
├── mipmap-hdpi/
│   └── ic_launcher.png
├── mipmap-xhdpi/
│   └── ic_launcher.png
├── mipmap-xxhdpi/
│   └── ic_launcher.png
└── mipmap-xxxhdpi/
    └── ic_launcher.png

步骤 2：复制图标文件

执行以下命令将图标复制到 Android 项目：

# 复制所有 mipmap 文件夹
cp -r AppIcons/android/mipmap-* android/app/src/main/res/

步骤 3：创建圆形图标（可选）

Android 7.1 及以上版本支持圆形图标。如果你的图标适合圆形显示，可以创建圆形版本：

# 为每个密度创建圆形图标
for dir in android/app/src/main/res/mipmap-*/; do 
  cp "${dir}ic_launcher.png" "${dir}ic_launcher_round.png"
done

步骤 4：验证文件

检查图标是否正确复制：

ls -la android/app/src/main/res/mipmap-hdpi/

应该看到：

• ic_launcher.png
• ic_launcher_round.png

步骤 5：清理和重新构建

# 清理构建缓存
cd android
./gradlew clean
cd ..

# 重新构建应用
npm run android

iOS 图标替换

步骤 1：准备图标文件

将准备好的图标文件组织成以下结构：

AppIcons/Assets.xcassets/AppIcon.appiconset/
├── 20.png
├── 29.png
├── 40.png
├── 58.png
├── 60.png
├── 80.png
├── 87.png
├── 120.png
├── 180.png
├── 1024.png
└── Contents.json

步骤 2：删除旧图标

rm -rf ios/YourProjectName/Images.xcassets/AppIcon.appiconset

步骤 3：复制新图标

cp -r AppIcons/Assets.xcassets/AppIcon.appiconset ios/YourProjectName/Images.xcassets/

步骤 4：创建或更新 Contents.json

创建 ios/YourProjectName/Images.xcassets/AppIcon.appiconset/Contents.json 文件：

{
  "images": [
    {
      "size": "20x20",
      "idiom": "iphone",
      "filename": "40.png",
      "scale": "2x"
    },
    {
      "size": "20x20",
      "idiom": "iphone",
      "filename": "60.png",
      "scale": "3x"
    },
    {
      "size": "29x29",
      "idiom": "iphone",
      "filename": "29.png",
      "scale": "1x"
    },
    {
      "size": "29x29",
      "idiom": "iphone",
      "filename": "58.png",
      "scale": "2x"
    },
    {
      "size": "29x29",
      "idiom": "iphone",
      "filename": "87.png",
      "scale": "3x"
    },
    {
      "size": "40x40",
      "idiom": "iphone",
      "filename": "80.png",
      "scale": "2x"
    },
    {
      "size": "40x40",
      "idiom": "iphone",
      "filename": "120.png",
      "scale": "3x"
    },
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "120.png",
      "scale": "2x"
    },
    {
      "size": "60x60",
      "idiom": "iphone",
      "filename": "180.png",
      "scale": "3x"
    },
    {
      "size": "1024x1024",
      "idiom": "ios-marketing",
      "filename": "1024.png",
      "scale": "1x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

步骤 5：清理和重新构建

# 清理构建缓存
cd ios
rm -rf build
pod install
cd ..

# 重新构建应用
npm run ios

验证和测试

Android 验证

1. 检查图标文件：

   ls -lh android/app/src/main/res/mipmap-hdpi/ic_launcher.png

2. 在模拟器/真机上测试：

   • 安装应用后，检查应用抽屉中的图标。
   • 检查最近任务列表中的图标。
   • 在不同 Android 版本上测试（如果可能）。

3. 检查圆形图标：

   • 在支持自适应图标的设备上（Android 8.0+）。
   • 长按桌面，添加应用快捷方式。

iOS 验证

1. 检查图标文件：

   ls -lh ios/YourProjectName/Images.xcassets/AppIcon.appiconset/1024.png

2. 在模拟器/真机上测试：

   • 安装应用后，检查主屏幕上的图标。
   • 检查设置应用中的图标。
   • 检查 Spotlight 搜索框中的图标。

3. 在 Xcode 中验证：

   • 打开 ios/YourProjectName.xcworkspace。
   • 选择项目 → 目标 → General。
   • 检查 App Icons and Launch Screen 部分。

常见问题

Q1: 图标没有立即更新怎么办？

Android:

# 卸载旧应用
adb uninstall com.yourpackagename

# 清理缓存
cd android && ./gradlew clean && cd ..

# 重新安装
npm run android

iOS:

# 删除应用
# 在模拟器上：长按图标 → 删除应用

# 清理构建
cd ios && rm -rf build && cd ..

# 重新安装
npm run ios

Q2: iOS 图标显示为白色方块

原因：图标文件可能包含透明通道或格式不正确。

解决方案：

1. 确保图标是 RGB 格式，不是 RGBA。
2. 移除透明通道。
3. 使用 PNG 格式，不要使用 JPEG。
4. 确保文件名与 Contents.json 中的匹配。

Q3: Android 图标模糊

原因：可能使用了错误的密度或尺寸。

解决方案：

1. 确保每个密度文件夹中的图标尺寸正确。
2. 从高分辨率源文件重新导出。
3. 使用专业的图标生成工具。

Q4: 如何生成所有尺寸的图标？

推荐工具：

1. 在线工具：

   • App Icon Generator
   • MakeAppIcon
   • Icon Kitchen

2. 命令行工具：

   # 使用 ImageMagick 批量生成
   convert icon-1024.png -resize 48x48 mipmap-mdpi/ic_launcher.png
   convert icon-1024.png -resize 72x72 mipmap-hdpi/ic_launcher.png
   # ... 其他尺寸

3. 设计工具插件：

   • Figma: Icon Generator 插件
   • Sketch: App Icon 插件
   • Adobe XD: Icon Export 插件