Ionic 5 - How to replace default icon and splash screen image and generate resources

Question

我最近开始使用 ionic 6 和电容器（不是cordova），我不知道如何替换它的默认应用程序图标和启动画面。有什么方法可以做到并使用离子电容器 cli 生成资源，就像我们使用cordova（离子cordova资源android）所做的那样？我应该在哪里用我自己的替换图标和飞溅图像？使用电容添加android平台后（ionic cap add android），在android资源中生成icon和splash图片，但是不知道怎么替换自己的图片。

Answer 1

我通过使用电容资源和下面的脚本解决了这个问题。在你的根目录中将它保存为 resources.js。然后在脚本下的 package.json 文件中添加：

"resources": "capacitor-resources -p android,ios && node resources.js",

const fs = require('fs');

function copyImages(sourcePath, targetPath, images) {
  for (const icon of images) {
    let source = sourcePath + icon.source;
    let target = targetPath + icon.target;
    fs.copyFile(source, target, err => {
      if (err) throw err;
      console.log(`${source} >> ${target}`);
    });
  }
}

const SOURCE_ANDROID_ICON = 'resources/android/icon/';
const SOURCE_ANDROID_SPLASH = 'resources/android/splash/';

const TARGET_ANDROID_ICON = 'android/app/src/main/res/';
const TARGET_ANDROID_SPLASH = 'android/app/src/main/res/';

const ANDROID_ICONS = [
  { source: 'drawable-ldpi-icon.png', target: 'drawable-hdpi-icon.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_round.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_foreground.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_round.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_round.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_foreground.png' }
];
const ANDROID_SPLASHES = [
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable/splash.png' }, 
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable-land-mdpi/splash.png' },
  { source: 'drawable-land-hdpi-screen.png', target: 'drawable-land-hdpi/splash.png' },
  { source: 'drawable-land-xhdpi-screen.png', target: 'drawable-land-xhdpi/splash.png' },
  { source: 'drawable-land-xxhdpi-screen.png', target: 'drawable-land-xxhdpi/splash.png' },
  { source: 'drawable-land-xxxhdpi-screen.png', target: 'drawable-land-xxxhdpi/splash.png' },
  { source: 'drawable-port-mdpi-screen.png', target: 'drawable-port-mdpi/splash.png' },
  { source: 'drawable-port-hdpi-screen.png', target: 'drawable-port-hdpi/splash.png' },
  { source: 'drawable-port-xhdpi-screen.png', target: 'drawable-port-xhdpi/splash.png' },
  { source: 'drawable-port-xxhdpi-screen.png', target: 'drawable-port-xxhdpi/splash.png' },
  { source: 'drawable-port-xxxhdpi-screen.png', target: 'drawable-port-xxxhdpi/splash.png' }
];

copyImages(SOURCE_ANDROID_ICON, TARGET_ANDROID_ICON, ANDROID_ICONS);
copyImages(SOURCE_ANDROID_SPLASH, TARGET_ANDROID_SPLASH, ANDROID_SPLASHES);

Answer 2

所有答案都是正确的，但不涉及自 ionic 4 后期补丁以来出现的问题，并且一直保留到现在，即生成的资源未复制到 android 文件夹中。让我们详细了解一下（文档中也有，但人们通常会忽略这部分）

\n

如何生成它

\n\n

与到目前为止此处以及文档中所述的内容没有什么不同。

\n

步骤1：添加cordova res（如有疑问请查看文档）；

\n

$ npm install -g cordova-res\n

\n

步骤 2：按照文档中的定义生成所需的图像；\n

\n

** 只是让你们知道，这是人们通常忽略的部分，因为那里只说明了这两个图像，但是，如果向上滚动，您将看到文件树。

\n

第 3 步：运行电容器部分中所述的资源生成命令（也在此之前的帖子中引用）

\n

$ cordova-res ios --skip-config --copy\n$ cordova-res android --skip-config --copy\n

\n

解释：

\n

\n
• --skip-config：此配置将告知该项目没有config.xml，因此不是生成它的 cordova 项目；
\n
• --copy：顾名思义，它将生成的资源复制到每个平台文件夹中。如果没有说明，它将放置在所有可用平台上。如果指定，显然，它将仅针对请求的平台执行。
\n

\n

问题

\n\n

正如我所提到的，人们通常会匆忙浏览文档来搜索主题，而错过一些重要的小点，这可能会导致以下问题：

\n

\n

但它也在文档中。它也涉及受支持的自适应图标。文档中对此进行了描述：

\n

\n

解决方案

\n\n

如果您遇到这个问题，您要做的就是将图像添加到文件夹中resources/android，并稍后更好地关注文档（捂脸）（我们都在生活中的某个时刻遇到过这种情况）

\n

\n
• resources/android/icon-foreground.png必须至少为 432\xc3\x97432px
\n
• resources/android/icon-background.png必须至少为 432\xc3\x97432px
\n

\n

添加后，只需再次运行资源生成，它就会像魅力一样工作并将图像正确放置在平台中。

\n

$ cordova-res ios --skip-config --copy\n$ cordova-res android --skip-config --copy\n

\n

Answer 3

用于基于电容器的应用程序的自动图标和初始屏幕调整 CLI 工具的大小。

它会自动调整大小并将您的 icon.png 和 splash.png 文件复制到平台专用目录。

它不需要任何外部二进制库。仅限 JavaScript。

安装

$ npm install 电容资源 -g

用法

所需文件 将您的 icon.png (1024x1024 px) 和 splash.png (2732x2732 px) 文件添加到基于电容器的项目根目录下的“资源”文件夹中。

$ 电容资源

https://www.npmjs.com/package/capacitor-resources

更新 - 它现在自动复制文件！

Answer 4

cordova-res现在支持电容器。您只需要cordova-res全局安装（或使用 npx）并运行它以生成并复制到适当的本机项目。你可以在 GitHub 上阅读文档：https : //github.com/ionic-team/cordova-res#capacitor，但基本上你只需要运行这些命令，它就会按预期使用/resources文件夹icon.png和splash.png生成：

npm install -g cordova-res
// From within your Ionic project:
cordova-res --skip-config --copy // Android, iOS, and Windows

我倾向于在package.json脚本中保留最后一行，这样当通过运行npm run resources.

文件：package.json

"scripts": {
  // ...
  "resources": "cordova-res --skip-config --copy"
},

如果您不想安装全局包，您可以使用npx，并避免看到有关如何cordova-res不处理导出到 Windows 平台的警告，您可以隔离导出到 iOS 和 Android：

替代方案：package.json

"scripts": {
  // ...
    "resources": "npx cordova-res ios --skip-config --copy && npx cordova-res android --skip-config --copy"
}

如果您需要 PSD 来生成启动画面，可以通过扫描 CLI https://ionicframework.com/docs/cli/commands/cordova-resources的 Ionic Docs 找到它，或者直接从https://code下载。 ionicframework.com/resources/splash.psd。

Answer 5

I found the official documentation using capacitor in my case.

https://capacitorjs.com/docs/guides/splash-screens-and-icons

$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy