React Native 应用图标替换指南

在 React Native 中替换应用图标需要针对不同平台(iOS和Android)分别进行配置。以下是详细步骤：

通用准备

1. 准备好您的应用图标文件，建议准备多种尺寸：
   • iOS: 需要多种尺寸的PNG文件
   • Android: 需要至少512x512的PNG文件

Android 图标替换

1. 替换 android/app/src/main/res 目录下的图标文件：

   mipmap-hdpi/ic_launcher.png (72x72)
   mipmap-mdpi/ic_launcher.png (48x48)
   mipmap-xhdpi/ic_launcher.png (96x96)
   mipmap-xxhdpi/ic_launcher.png (144x144)
   mipmap-xxxhdpi/ic_launcher.png (192x192)
   

2. 可选：如果你想使用自适应图标(Android 8.0+)，需要修改：

   • android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
   • 并准备前景和背景图层

3. 更新 android/app/src/main/AndroidManifest.xml 确保使用正确图标：

   <application
       android:icon="@mipmap/ic_launcher"
       ...>
   

iOS 图标替换

1. 使用Xcode打开iOS项目：

   open ios/YourAppName.xcworkspace
   

2. 在Xcode中：

   • 选择 Assets.xcassets
   • 找到 AppIcon 集合
   • 拖放对应尺寸的图标到相应位置

3. 或者手动替换文件：

   • 替换 ios/YourAppName/Images.xcassets/AppIcon.appiconset 中的内容
   • 需要提供以下尺寸(单位：pt，1x/2x/3x表示不同分辨率)：

     20x20 (1x, 2x, 3x)
     29x29 (1x, 2x, 3x)
     40x40 (1x, 2x, 3x)
     60x60 (2x, 3x)
     76x76 (1x, 2x)
     83.5x83.5 (2x)
     1024x1024 (1x)
     

使用第三方工具简化流程

1. 安装 react-native-set-icon 库：

   npm install react-native-set-icon --save
   

2. 使用命令自动生成图标：

   npx react-native-set-icon --path path/to/your/icon.png
   

注意事项

1. 图标必须是正方形PNG文件，无透明背景(除非设计需要)
2. 替换后需要重新编译应用才能看到变化
3. iOS可能需要清理构建缓存：

   cd ios && xcodebuild clean && cd ..
   

4. Android可能需要重新安装应用才能看到图标更新

验证

1. 在设备或模拟器上卸载旧版本应用
2. 重新安装并检查新图标是否显示正确

通过以上步骤，您应该能够成功替换React Native应用的图标。