React Native Expo项目App Store产品页图标不显示及多图标配置求助

一、Product Page Optimization 图标不显示的排查步骤 #

• 先确认图标规格：Apple要求这个板块的图标必须是1024x1024px的PNG图，而且不能带圆角——App Store会自动添加圆角，自己加了圆角大概率会被隐藏。
• 检查app.json配置：确保ios.icon下面有appStore项，示例配置：

  "ios": {
    "icon": {
      "appStore": "./assets/icons/app-store-1024.png",
      "images": [
        // 其他尺寸图标
      ]
    }
  }
  

• 清除Expo缓存：执行expo r -c清空本地缓存后重新构建项目，缓存可能导致资源未更新。
• 核对文件路径：确认图标文件确实存在于指定路径，MacOS系统注意路径大小写，路径错误会直接导致加载失败。
• 重新上传构建包：如果已经提交到App Store Connect，可能需要重新生成并上传新的构建包，确保图标资源被正确打包。

二、Expo 多场景多尺寸图标配置方法 #

1. 自动生成（省心首选） #

用Expo的expo-icon-set-builder工具，仅需提供一张1024x1024的基础图标，就能自动生成所有所需尺寸：

• 安装工具：npm install expo-icon-set-builder --save-dev
• 执行生成命令：npx expo-icon-set-builder --input ./assets/icons/base-icon.png --output ./assets/icons
• 在app.json中配置基础图标路径即可，Expo会自动识别生成的多尺寸图标：

  "icon": "./assets/icons/base-icon.png",
  "ios": {
    "icon": "./assets/icons/base-icon.png"
  },
  "android": {
    "icon": "./assets/icons/base-icon.png"
  }
  

2. 手动配置（适配自定义需求） #

如果需要针对不同场景自定义图标，按以下规则配置：

• iPhone/iPad通用图标：在ios.icon.images数组中添加对应尺寸的图标，关键尺寸包括：
  • 20x20@2x（40px）、20x20@3x（60px）：通知栏图标
  • 29x29@2x（58px）、29x29@3x（87px）：设置页图标
  • 40x40@2x（80px）、40x40@3x（120px）：Spotlight搜索图标
  • 60x60@2x（120px）、60x60@3x（180px）：主屏幕图标
  • 76x76@2x（152px）：iPad主屏幕图标
  • 83.5x83.5@2x（167px）：iPad Pro主屏幕图标
• Product Page Optimization专属图标：单独在ios.icon.appStore字段指定1024x1024的PNG图标。
• Android端多尺寸：在android.icon下配置adaptiveIcon（适配Android 8.0+）和images数组，关键尺寸有48x48、72x72、96x96、144x144、192x192、512x512等。

手动配置示例片段：

"ios": {
  "icon": {
    "appStore": "./assets/icons/app-store-1024.png",
    "images": [
      {
        "src": "./assets/icons/ios-20@2x.png",
        "size": 20,
        "scale": 2
      },
      {
        "src": "./assets/icons/ios-60@3x.png",
        "size": 60,
        "scale": 3
      },
      // 其他尺寸依次添加
    ]
  }
},
"android": {
  "icon": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/icons/android-adaptive-foreground.png",
      "backgroundColor": "#ffffff"
    },
    "images": [
      {
        "src": "./assets/icons/android-48.png",
        "size": 48
      },
      // 其他尺寸依次添加
    ]
  }
}

内容的提问来源于stack exchange，提问作者Kaan Aydemir