在开发移动应用时,应用图标是用户对应用的第一印象。这篇文章将详细说明如何为 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 |
图标设计建议
-
使用矢量图形:从矢量源文件(如 SVG、AI)导出,确保清晰度。
-
简洁设计:图标应该简单明了,在小尺寸下也能识别。
-
避免文字:尽量不要在图标中使用文字。
-
测试不同背景:确保图标在浅色和深色背景下都清晰可见。
-
遵循平台规范:
- Android: Material Design 图标指南
- iOS: Human Interface Guidelines
Android 图标替换
步骤 1:准备图标文件
将准备好的图标文件组织成以下结构:
bash
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 项目:
bash
# 复制所有 mipmap 文件夹
cp -r AppIcons/android/mipmap-* android/app/src/main/res/
步骤 3:创建圆形图标(可选)
Android 7.1 及以上版本支持圆形图标。如果你的图标适合圆形显示,可以创建圆形版本:
bash
# 为每个密度创建圆形图标
for dir in android/app/src/main/res/mipmap-*/; do
cp "${dir}ic_launcher.png" "${dir}ic_launcher_round.png"
done
步骤 4:验证文件
检查图标是否正确复制:
bash
ls -la android/app/src/main/res/mipmap-hdpi/
应该看到:
ic_launcher.png
ic_launcher_round.png
步骤 5:清理和重新构建
bash
# 清理构建缓存
cd android
./gradlew clean
cd ..
# 重新构建应用
npm run android
iOS 图标替换
步骤 1:准备图标文件
将准备好的图标文件组织成以下结构:
yaml
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:删除旧图标
bash
rm -rf ios/YourProjectName/Images.xcassets/AppIcon.appiconset
步骤 3:复制新图标
bash
cp -r AppIcons/Assets.xcassets/AppIcon.appiconset ios/YourProjectName/Images.xcassets/
步骤 4:创建或更新 Contents.json
创建 ios/YourProjectName/Images.xcassets/AppIcon.appiconset/Contents.json
文件:
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:清理和重新构建
bash
# 清理构建缓存
cd ios
rm -rf build
pod install
cd ..
# 重新构建应用
npm run ios
验证和测试
Android 验证
-
检查图标文件:
bashls -lh android/app/src/main/res/mipmap-hdpi/ic_launcher.png
-
在模拟器/真机上测试:
- 安装应用后,检查应用抽屉中的图标。
- 检查最近任务列表中的图标。
- 在不同 Android 版本上测试(如果可能)。
-
检查圆形图标:
- 在支持自适应图标的设备上(Android 8.0+)。
- 长按桌面,添加应用快捷方式。
iOS 验证
-
检查图标文件:
bashls -lh ios/YourProjectName/Images.xcassets/AppIcon.appiconset/1024.png
-
在模拟器/真机上测试:
- 安装应用后,检查主屏幕上的图标。
- 检查设置应用中的图标。
- 检查 Spotlight 搜索框中的图标。
-
在 Xcode 中验证:
- 打开
ios/YourProjectName.xcworkspace
。 - 选择项目 → 目标 → General。
- 检查 App Icons and Launch Screen 部分。
- 打开
常见问题
Q1: 图标没有立即更新怎么办?
Android:
bash
# 卸载旧应用
adb uninstall com.yourpackagename
# 清理缓存
cd android && ./gradlew clean && cd ..
# 重新安装
npm run android
iOS:
bash
# 删除应用
# 在模拟器上:长按图标 → 删除应用
# 清理构建
cd ios && rm -rf build && cd ..
# 重新安装
npm run ios
Q2: iOS 图标显示为白色方块
原因:图标文件可能包含透明通道或格式不正确。
解决方案:
- 确保图标是 RGB 格式,不是 RGBA。
- 移除透明通道。
- 使用 PNG 格式,不要使用 JPEG。
- 确保文件名与
Contents.json
中的匹配。
Q3: Android 图标模糊
原因:可能使用了错误的密度或尺寸。
解决方案:
- 确保每个密度文件夹中的图标尺寸正确。
- 从高分辨率源文件重新导出。
- 使用专业的图标生成工具。
Q4: 如何生成所有尺寸的图标?
推荐工具:
-
在线工具:
-
命令行工具:
bash# 使用 ImageMagick 批量生成 convert icon-1024.png -resize 48x48 mipmap-mdpi/ic_launcher.png convert icon-1024.png -resize 72x72 mipmap-hdpi/ic_launcher.png # ... 其他尺寸
-
设计工具插件:
- Figma: Icon Generator 插件
- Sketch: App Icon 插件
- Adobe XD: Icon Export 插件